Q:

React JS pass state altering function to child

I am currently working on a react js project for one of my classes and cannot seem to figure out where I am going wrong.  I cannot post any code for this, and I understand that this may make it fairly hard to answer this question, but here is my problem. 
I have a parent function, which has a state that decides between 3 different possible components to render as the page depending on the state variable 'currentPage'.  In this parent component, I have made functions that will alter the currentPage state variable.  I am trying to pass these state altering functions through props and then call them inside of the children components to change the state of the parent and re-render the page.  For example, I have a function called signup which changes the currentPage to 'signup', so I have <Login goToSignup = {this.signup} />.  Then, inside of my Login component, I try to set the on click of a button to: onClick = {this.props.goToSignup}.  But this doesn't seem to work.  I am very new to react and am maybe misunderstanding how I am supposed to do this, so any help would be much appreciated. 

A:

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'>

