hi i'm new to reactjs and i want to learn how to hide and show a div on button click. This is the view part i want to hide
<div className="comment_usr_details">
<div>
<img className="comment_usr_pic" src={profilePicture} alt=""/>
</div>
<div className="b">
<p className="c">John Smith</p>
<p className="d">1 minutes ago</p>
</div>
<img className="e" src={downarrow} alt=""/>
</div>
You can use React to use CSS to hide and show the element just as easily: <div style={{display:this. props. example}}/>.
We will use logical and operator, (&&) , in order to show components based on the condition along with the button click event, which is explained in the following example.
The most common pattern to this is selectively rendering the element based on state.
class Foo extends React.Component {
state = { showing: true };
render() {
const { showing } = this.state;
return (
<div>
<button onClick={() => this.setState({ showing: !showing })}>toggle</button>
{ showing
? <div>This is visible</div>
: null
}
</div>
)
}
}
You can also use a style based on state. This is less common, but can be useful when you have complex components inside that div - one recent example, I had a complex non-React D3 graph within a toggle-able component, initially, I used the first method above, but caused quite a bit of lagging when flicking the div on/off because D3 was cycling up again.
Generally use the first approach though, unless you have a reason to use the alternative.
class Foo extends React.Component {
state = { showing: true };
render() {
const { showing } = this.state;
return (
<div>
<button onClick={() => this.setState({ showing: !showing })}>toggle</button>
<div style={{ display: (showing ? 'block' : 'none') }}>This is visible</div>
</div>
)
}
}
I use the ?:
ternary operator instead of &&
- I'm a strong believer that the use of &&
is relying on a side effect of that operator to achieve a certain outcome. It works, don't get me wrong, but the ternary operator, in my opinion, is far more expressive and was designed to be a conditional.
This last bit is just my opinion - so I'm not questioning the use of &&
.
In React you just don't render that portion of the HTML. So make it part of a conditional:
{ this.props.display &&
<div className="comment_usr_details">
...
</div>
}
So if this.props.display is true the div shows and if it's false it doesn't.
class HideAndShowDivOnClick extends React.Component {
state = {
showDiv: true
}
render() {
const { showDiv } = this.state
return (
<div>
<button onClick={() => this.setState({ showDiv: !showDiv })}>
{ showDiv ? 'hide' : 'show' }
</button>
{ showDiv && (
<div id="the div you want to show and hide">Peek a boo</div>
)}
</div>
)
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With