Imaging you are building a Tabs component.

If looks like:

         
              
       
         one 
               
       
         two 
               
       
         three 
               
          
              
       
                    content one        
               
       
                    content two        
                
                
        
                     content three        
            
       
              
     

You want to know which tab is clicked (actived). But you don't want this actived tab state be exported to our app, you want it been kept to Tabs component. 

For example in Tabs component, there is a state called 'activedIndex':

class Tab extends React.Component {  state = {    activedIndex: 0  }  render() {
        return ( 　　　　{this.props.children} 　　);   }}

You want to pass down to TabList and TabPanels componet. And also TabList and TabPanels may receive different props depends on usecases.

You can use 'React.Children.map' to map over each direct child of the componet (in our case is TabPanels and TabList). 

React.Children.map(this.props.children, (child, index) => {

To pass down the new props, we can use 'React.cloneElement', which need the old props if any, but merge with new props we pass in.

return React.cloneElement(child, {            activeIndex: this.state.activeIndex          })

 

Code:

class Tab extends React.Component {  state = {    activedIndex: 0  }  render() {    return (      React.Children.map(this.props.children, (child, index) => {        if (child.type === TabPanels) {          return React.cloneElement(child, {            activeIndex: this.state.activeIndex          })        } else if(child.type === TabList) {          return React.cloneElement(child, {            activeIndex: this.state.activeIndex,            isActivate: index === this.state.activeIndex          })        } else {          return child        }      })    )  }}