Toggle, Hide & Show in React JS

What You'll Learn:

  1. How to define and update state
  2. How to show or hide elements or components
  3. How to build a simple toggle feature


Step-by-Step: Toggle Text Example

import { useState } from "react";

function App() {
const [display, setDisplay] = useState(true);

return (
<div>
<h1>Toggle in React JS</h1>
<button onClick={() => setDisplay(!display)}>Toggle</button>
{display ? <h1>Anil Sidhu</h1> : null}
</div>
);
}

export default App;


Explanation:

  1. We import useState to handle the toggle.
  2. display is a boolean value (true or false).
  3. On button click, we change the value of display.
  4. The heading will be shown only if display is true.


Toggle a Component (Hide/Show Component)

Create a Component

User.jsx

function User() {
return (
<div>
<h1>User Component</h1>
</div>
);
}

export default User;


Import & Use the Component in App.jsx

import { useState } from "react";
import User from "./User";

function App() {
const [display, setDisplay] = useState(true);

return (
<div>
<h1>Toggle in React JS</h1>
<button onClick={() => setDisplay(!display)}>Toggle</button>
{display ? <User /> : null}
</div>
);
}

export default App;


What’s Happening:

  1. User component is conditionally rendered using {display ? <User /> : null}.
  2. On clicking the Toggle button, the component appears or disappears.