How to show/hide component on click in React-redux?
You should add some flag to the state of CommentBox
. And if value of this flag is false
when don't show ReaplyFrom
and vice versa. Heres the code and working example http://codepen.io/anon/pen/KzrzQZ
class ReplyForm extends React.Component {
constructor() {
super()
}
render(){
return(
<div>I'm ReplyForm</div>
)
}
}
class CommentBox extends React.Component {
constructor() {
super();
this.state = {
showReply: false
}
}
onClick(e){
e.preventDefault();
this.setState({showReply: !this.state.showReply})
}
render() {
return (
<div>
<p>Some comment</p>
<a onClick={this.onClick.bind(this)} href='#'>Post a reply to this comment</a>
{this.state.showReply && < ReplyForm / >}
</div>
)
}
}
How about this?
class CommentBox extends Component {
constructor() {
super();
this.state = {
showForm: false
}
}
render() {
const showHide = {
'display': this.state.showStatus ? 'block' : 'none'
};
const showReplyForm = () => {
this.setState({showForm: true});
};
return (
<div>
<div>
<p>Some comment</p>
<a onClick={showReplyForm}>Post a reply to this comment</a>
</div>
<div style={showStatus}>
<ReplyForm />
</div>
</div>
)
}
}