could you please tell me how to move one ponent to another ponent 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 show second ponent on button click offirst ponent` here is my code

class Abc extends React.Component {
  handle(){
    alert('move to second ponent')
  }
   render (){
     return (<div><h1>second</h1><button onClick={this.handle}>move to second page</button></div>);

   }
}
class Pqr extends React.Component {
   render (){
     return (<div><h1>second</h1><button>click</button></div>)

   }
}
class Sqr extends React.Component {
   render (){
     return <h1>third</h1>
   }
}
ReactDOM.render(<Abc/>,document.getElementById('root')); 

could you please tell me how to move one ponent to another ponent 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 show second ponent on button click offirst ponent` here is my code

http://codepen.io/anon/pen/jVoZjW?editors=1010

class Abc extends React.Component {
  handle(){
    alert('move to second ponent')
  }
   render (){
     return (<div><h1>second</h1><button onClick={this.handle}>move to second page</button></div>);

   }
}
class Pqr extends React.Component {
   render (){
     return (<div><h1>second</h1><button>click</button></div>)

   }
}
class Sqr extends React.Component {
   render (){
     return <h1>third</h1>
   }
}
ReactDOM.render(<Abc/>,document.getElementById('root')); 

• javascript
• reactjs
• react-router
• reactive-programming

• When you say "move" do you mean "show"? – Matthew Herbst Commented Dec 25, 2016 at 4:35
• yes to to show second ponent using router js – user944513 Commented Dec 25, 2016 at 7:58
• Not sure you're understanding the use-case of React-Router. React-Router is meant for when you change the url, to show a different hierarchy of ponents. If you're not changing the route (url), then you shouldn't be using React-Router. – Matthew Herbst Commented Dec 27, 2016 at 1:40

1 Answer 1

There is many ways this can be acplished, 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

class Abc extends React.Component {
  constructor(){
    super();
    this.state={first: true};
  }
  handle(){
    alert('move to second ponent')
    this.setState({first: false})
  }
  render (){
    return (
      <div>
        <button onClick={this.handle.bind(this)}>move to second page</button>
        {this.state.first == true && <Pqr/>}
        {this.state.first == false && <Sqr/>}
      </div>
    );
  }
}

class Pqr extends React.Component {
  render (){
    return (<div><h1>First</h1></div>)
  }
}
class Sqr extends React.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.