AziCode AziCode - 1 month ago 7
React JSX Question

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?

I have a component that has to buttons, when the user clicks on one of the buttons I would like to hide the whole component and replace it with another component.

I was able to hide the clicked button, but couldn't hide the whole parent component when the child (button) is clicked.

What would be the best approach to do what I want to do ?

Here is my current code :(It's just hidding the pressed button)

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

class ParentCompnent extends React.Component {

constructor(props){
super(props)
this.state = {
buttonPressed:false,
opacity:1
}
this.handleClick = this.handleClick.bind(this);
}


handleClick(evt) {
this.setState({
buttonPressed: !this.state.buttonPressed,
opacity: 0,
})
}

render(){
return(
<div className="DivToHide" style={ParentComponentStyle}>
<div onClick={this.handleClick} style={{float:'left'}}>{this.props.children[0]}</div>
<div onClick={this.handleClick} style={{float:"right", opacity: this.state.opacity}}>{this.props.children[1]}</div>
</div>


);
}
}



export default ParentComponent;


And here is the component that I want to show once the other one has been hidden:

const ShowThisDivStyle = {
width:300,
height:200,
backgroundColor:"#343458"
};

var ShowThisDiv = React.createClass({
render: function(){
return(
<div style={ShowThisDivStyle}>
<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>


);
}
});

export default ShowThisDiv;

Answer

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