score:2

Accepted answer

in this example, there are 3 components detail, post, xyz and a parent component app. on the basis of state value in parent, rendering the different component. in all the 3 component passing a function that is used to change the currentpage state value in parent component.

for stateless functional component, check the doc.

check this example:

var post = (props) => {
    return <div onclick={()=>props.changecomponent('detail')}> post </div>
}
var detail = (props) => {
    return <div onclick={()=>props.changecomponent('xyz')}> detail </div>
}
var xyz = (props) => {
    return <div onclick={()=>props.changecomponent('post')}> xyz </div>
}    

class app extends react.component{

   constructor(){
      super();
      this.state = {currentpage: 'post'}
      this.changecomponent = this.changecomponent.bind(this)
   }
   
   changecomponent(currentpage){
      this.setstate({currentpage});
   }
   
   rendertab(){
      switch(this.state.currentpage){
         case 'post': return <post changecomponent={this.changecomponent}/>
         case 'detail': return <detail changecomponent={this.changecomponent}/>
         case 'xyz': return <xyz changecomponent={this.changecomponent}/>
      }
   }
   
   render(){
      return(
         <div>
            {this.rendertab()}
            <div style={{margintop: 100}}>*click on page name to render different page</div>
         </div>
      )
   }
}

reactdom.render(
    <app/>,
    document.getelementbyid('app')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'>

update (op asked for same example in es5)

same example written in es5 (don't know much about es5, correct me if i did some mistake):

function post(props) {
    return <div onclick={()=>props.changecomponent('detail')}> post </div>
}
function detail(props){
    return <div onclick={()=>props.changecomponent('xyz')}> detail </div>
}
function xyz(props){
    return <div onclick={()=>props.changecomponent('post')}> xyz </div>
}    

var app = react.createclass({

   getinitialstate: function(){
      return (
          {currentpage: 'post'}
      )
   },
   
   changecomponent: function(currentpage){
      this.setstate({currentpage});
   },
   
   rendertab: function(){
      switch(this.state.currentpage){
         case 'post': return <post changecomponent={this.changecomponent}/>
         case 'detail': return <detail changecomponent={this.changecomponent}/>
         case 'xyz': return <xyz changecomponent={this.changecomponent}/>
      }
   },
   
   render: function(){
      return(
         <div>
            {this.rendertab()}
            <div style={{margintop: 100}}>*click on page name to render different page</div>
         </div>
      )
   }
})

reactdom.render(
    <app/>,
    document.getelementbyid('app')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'>


Related Query

More Query from same tag