[Solved]-How to hide a parent div and replace it with another div when user clicks on a button that is a children of the parent div?-Reactjs

Here is an outline of how you can hide the buttons and show the relevant Component while specifying only one handleClick method: http://codepen.io/PiotrBerebecki/pen/BLGmvd

const ParentComponentStyle = {
      width:300,
      height:60,
      backgroundColor:"#343458"
};


class ParentCompnent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      buttonPressedA: false,
      buttonPressedB: false
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(evt) {
    this.setState({
      [`buttonPressed${evt.target.id}`]: !this.state[`buttonPressed${evt.target.id}`]
    });
  }

  render() {
    let renderContent;

    if (this.state.buttonPressedA) {
      renderContent = (
        <DivA>
          <p>Child 0A</p>
          <p>Child 1A</p>
          <p>Child 2A</p>
          <p>Child 3A</p>
          <p>Child 4A</p>
        </DivA>
      );
    } else if (this.state.buttonPressedB) {
      renderContent = (
        <DivB>
          <p>Child 0B</p>
          <p>Child 1B</p>
          <p>Child 2B</p>
          <p>Child 3B</p>
          <p>Child 4B</p>
        </DivB>
      );

    } else {
      renderContent = (
        <div className="DivToHide" style={ParentComponentStyle}> 
          <button onClick={this.handleClick} id="A">
            Replace me with DivA
          </button>
          <button onClick={this.handleClick} id="B">
            Replace me with DivB
          </button>
        </div>
      );
    }

    return(
      <div>  
        {renderContent}
      </div>
    );
  }
}


const DivStyleA = {
  width:300,
  height:200,
  backgroundColor:"green"
};

const DivA = React.createClass({
  render: function() {
    return(
      <div style={DivStyleA}>
        DivA
        <div style={{float:'left'}}>{this.props.children[0]}</div>
        <p style={{float:"left", color:"white",marginTop: "7px"}}>{this.props.children[1]}</p>
        <div style={{float:"right"}}>{this.props.children[2]}</div>
        <p style={{float:"right",color:"darkGray",paddingRight: "46px", marginTop: "0",fontSize:'12px', marginBottom:"0px"}}>{this.props.children[3]}</p>
        <div style={{textAlign:"center"}}>{this.props.children[4]}</div>
      </div>
    );
  }
});


const DivStyleB = {
  width:300,
  height:200,
  backgroundColor:"red"
};

const DivB = React.createClass({
  render: function() {
    return(
      <div style={DivStyleB}>
        DivB
        <div style={{float:'left'}}>{this.props.children[0]}</div>
        <p style={{float:"left", color:"white",marginTop: "7px"}}>{this.props.children[1]}</p>
        <div style={{float:"right"}}>{this.props.children[2]}</div>
        <p style={{float:"right",color:"darkGray",paddingRight: "46px", marginTop: "0",fontSize:'12px', marginBottom:"0px"}}>{this.props.children[3]}</p>
        <div style={{textAlign:"center"}}>{this.props.children[4]}</div>
      </div>  
    );
  }
});


ReactDOM.render(
  <ParentCompnent />,
  document.getElementById('app')
);