How To Move One Component To Another Component On Button Click In React?

could you please tell me how to move one component to another component on button click in react ? I get the react-router.js from cdn .I don't know how to use this js ..I want to s

Solution 1:

There is many ways this can be accomplished, all of which have there place. This is but one of many methods:

I left an alternitive to this answer aswell this answer on the codepen: http://codepen.io/dirtyredz/pen/gLJeWY

classAbcextendsReact.Component {
  constructor(){
    super();
    this.state={first: true};
  }
  handle(){
    alert('move to second component')
    this.setState({first: false})
  }
  render (){
    return (
      <div><buttononClick={this.handle.bind(this)}>move to second page</button>
        {this.state.first == true && <Pqr/>}
        {this.state.first == false && <Sqr/>}
      </div>
    );
  }
}

classPqrextendsReact.Component {
  render (){
    return (<div><h1>First</h1></div>)
  }
}
classSqrextendsReact.Component {
  render (){
    return<h1>Second</h1>
  }
}
ReactDOM.render(<Abc/>,document.getElementById('root')); 

This is a quick example, like i said earlier others may be better but this works as expected.