Sometimes, we want to handle visibility=hidden with React.
In this article, we’ll look at how to handle visibility=hidden with React.
How to handle visibility=hidden with React?
To handle visibility=hidden with React, we can set the visibility CSS property in the style prop object.
For instance, we write:
import React, { useState } from "react";
export default function App() {
const [show, setShow] = useState(true);
return (
<div>
<button onClick={() => setShow((s) => !s)}>toggle</button>
<div style={{ visibility: show ? "visible" : "hidden" }}>hello world</div>
</div>
);
}
to add a div that can be toggled by the button.
We define the show state with the useState hook.
Then we add a button that has the onClick prop set to a function that calls setShow to toggle the value of show.
Next, we add a div that has the style prop with the visibility property set to 'visible' if show is true and 'hidden' otherwise.
As a result, when we click on toggle, we’ll see the div being toggled on and off.
Conclusion
To handle visibility=hidden with React, we can set the visibility CSS property in the style prop object.
