I am trying to load different React components inside a parent-like component `<Block1>`. 

What I want to achieve is that when I press on the **"next"** button `<Button1>`, `<Component2>` must load inside `<Block1>` and the **"next"** button should change to **"previous"**, but clicking on **"previous"** `<Button2>` must load `<Component1>`. 

I don't want to use `<Block2>`. As you can see, I am writing lot of redundant code here. Is there a way to change the components inside `<Block1>` only on button click?

```
var Block1 = React.createClass({
  render: function(){
    return(
      <div className="block">
        <Component1/>
        <Button1/>
      </div>
    )
  }
});

var Component1 = React.createClass({
  render: function(){
    return(
      <p className = "component1">This is Component1</p>
    )
  }
});

var Button1 = React.createClass({
  next: function(){
    ReactDOM.render(<Block2/>, document.getElementById("container"));
  },

  render: function(){
    return(
      <button className = "button1" onClick = {this.next}>Next</button>
    )
  }
});

var Block2 = React.createClass({
  render: function(){
    return(
      <div className="block">
      <Component2/>
      <Button2/>
      </div>
    )
  }
});

var Component2 = React.createClass({
  render: function(){
    return(
      <p className = "component2">This is Component2</p>
    )
  }
});

var Button2 = React.createClass({
  previous: function(){
    ReactDOM.render(<Block1/>, document.getElementById("container"));
  },

  render: function(){
    return(
      <button className = "button1"  onClick = {this.previous}>previous</button>
    )
  }
});

ReactDOM.render(<Block1/>, document.getElementById("container"));

```