I am working on a component that consists of two buttons. The goal is to hide the entire component when one of the buttons is clicked and replace it with another component.
Although I have successfully hidden the clicked button, I am struggling to hide the parent component entirely when the child button is clicked.
Can anyone suggest the best approach to achieve my desired outcome?
Below is the current code snippet (which only hides 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;
Here is the component that should be displayed once the initial component is 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;