How to Use useState Hook with Conditional Rendering in React: Showing and Hiding Components
Tags: webdev, react, javascript, tutorial
Published: 2023-05-18 12:51:13

## **OUTLINE**

- Introduction
- Prerequisite
- Setting your react project with Vite
- Step-by-step process on how to use the useState hook for conditional rendering and showing/hiding components in React
- Conclusion

---

## **Introduction**

In React, `useState` hook is used to declare and manage state variables in a functional component and with conditional rendering (using a boolean value) we can display or hide a component (or control the visibility of a component) based on certain conditions.

In this article, we will go through a step-by-step process on how to use the `useState` Hook with Conditional Rendering to show and hide components in React.

Here is a video snippet of the project we would be working on:

![Hide and Show Component in React](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pjcmk8ifhzqoxadhv602.gif)


---


## **Prerequisites**

Before getting started, ensure that Node.js and NPM are installed on your system. You can check if you have these installed by running the following commands in your terminal:

```react
node -v
npm -v
```

If you do not have these packages installed on your computer, download and install Node.js from the official website.

---


## **Setting your React project with Vite**

Follow the process outlined in this blog post [Setting your React project with Vite](https://dev.to/adetutu/setting-up-a-react-project-with-vite-a-step-by-step-guide-329k) to create a new React project.

In the new React project, remove the pre-existing code and styles in the `index.css`, `App.jsx`, and `App.css` files.

---


## **Step-by-step process on how to use the useState hook for conditional rendering and showing/hiding components in React**

---

**STEP 1: Import packages and files**

Inside the project directory, navigate to the `App.jsx` file and import the necessary package and file.

```react
import { useState } from 'react';
import './App.css';
```

This imports the `useState` hook from the 'react' package, which allows you to use state in functional components. It also imports the `App.css` file for styling.

---

**STEP 2: Create a functional component**

In this next step, create a functional component named ‘App’ and initialize a state variable using the useState hook. 

```react
import { useState } from 'react';
import './App.css';

const App = () => {

  const [showEvents, setShowEvents] = useState(true)
 const [profiles, updateProfiles] = useState([
    { id: 1, name: "Sophia Anderson", profilePic: "https://rb.gy/9jh39" },
    { id: 2, name: "Isabella Sullivan", profilePic: "https://rb.gy/gs5lt" },
    { id: 3, name: "Ava Reynolds", profilePic: "https://rb.gy/rs32e" },
    { id: 4, name: "Olivia Thompson", profilePic: "https://rb.gy/xbjed"}, 
  ])

return (
    <div>
      {/* Code to be executed*/}
    </div>
  );
}
```

This code declared two state variables `showEvents` and `profiles`. The `showEvents` state variable will control the visibility of the component you want to show or hide. It is also set to true indicating that the user profiles will be displayed. The `profiles` state variable contains an array of user objects each containing an id, name, and profile picture.

---

**STEP 3: Add the hide and show button**

```react
import { useState } from 'react';
import './App.css';

const App = () => {

  const [showEvents, setShowEvents] = useState(true)
 const [profiles, updateProfiles] = useState([
    { id: 1, name: "Sophia Anderson", profilePic: "https://rb.gy/9jh39" },
    { id: 2, name: "Isabella Sullivan", profilePic: "https://rb.gy/gs5lt" },
    { id: 3, name: "Ava Reynolds", profilePic: "https://rb.gy/rs32e" },
    { id: 4, name: "Olivia Thompson", profilePic: "https://rb.gy/xbjed"},
  ])

return (
    <div>
// Hide and show button

  {showEvents && <button onClick={() => setShowEvents(false)} className="profile-btn">Hide profiles</button>}

  {!showEvents && <button onClick={() => setShowEvents(true)} className="profile-btn">Display profiles</button>}

// Hide and show button
    </div>
  );
}
```

---

Based on the boolean value of the `showEvents `state variable, we can conditionally render the component we want to show or hide.

```react
{showEvents && <button onClick={() => setShowEvents(false)} className="profile-btn">Hide profiles</button>}

```
This line conditionally renders the `hide profiles`button, if `showEvents` is true. The `onClick event` is set to a function that calls `setShowEvents(false)`, which updates `showEvents` to false when the button is clicked.

```react
{!showEvents && <button onClick={() => setShowEvents(true)} className="profile-btn">Display profiles</button>}

```

This line conditionally renders the `display profiles` button, if `showEvents` is false. The `onClick event` is set to a function that calls `setShowEvents(true)`, which updates `showEvents` to true when the button is clicked.

---

**STEP 4: Render the profile card component**

```react
import { useState } from 'react';
import './App.css';

const App = () => {

  const [showEvents, setShowEvents] = useState(true)
 const [profiles, updateProfiles] = useState([
    { id: 1, name: "Sophia Anderson", profilePic: "https://rb.gy/9jh39" },
    { id: 2, name: "Isabella Sullivan", profilePic: "https://rb.gy/gs5lt" },
    { id: 3, name: "Ava Reynolds", profilePic: "https://rb.gy/rs32e" },
    { id: 4, name: "Olivia Thompson", profilePic: "https://rb.gy/xbjed"},
  ])

  const handleDelete = (id) => {
    let filteredProfiles = profiles.filter(each => each.id !== id)
    updateProfiles(filteredProfiles)
  }


return (
  <div className='App'>

    {showEvents && <button onClick={() => setShowEvents(false)} className="profile-btn">Hide profiles</button>}

    {!showEvents && <button onClick={() => setShowEvents(true)} className="profile-btn">Display profiles</button>}

     <div className='profile-card'>

      {showEvents &&  profiles.map((profile) => (

          <div key={profile.id}>

                <div className="card">

                    <div className="number">
                        {profile.id}
                    </div> 

                     <div>
                        <img className="profile-pic" src={profile.profilePic} alt="profile picture" />
                    </div>

                    <div className="descr">
                        <p className="name">{profile.name}</p>
                        <button className="delete-profile" onClick={()=> handleDelete(profile.id)}> Delete profile</button>
                    </div>

                </div>

          </div>

        ))}
   </div>

  </div>
)
}

export default App;

```

---

**Code explanation**

In this profile card component section, the block of code is conditionally rendered based on the value of `showEvents`. If `showEvents` is true, the map function iterates over the `profiles` array.

The `profiles` array has been defined using the `useState` hook. It contains four profile user objects with properties such as id, name, and profile pic (URLs to the profile pictures). The map function used on the `profiles` array then iterates over each user object and executes the code within the curly braces for each element.

Each profile is rendered within a nested div, and a unique key is assigned using the `profile.id`. Then, each item in the `profiles ` object is passed in as props into the profile card component.

---

**The Delete Function (Optional)**

```react
<button className="delete-profile" onClick={() => handleDelete(user.id)}> Delete profile</button>

```

When the `delete profile` button is clicked, it calls the `handleDelete` function below with the user’s id. 

```react
const handleDelete = (id) => {
  let remove = users.filter(each => each.id !== id);
  updateUsers(remove);
};
```

This above code declares an `handleDelete` function that takes in an `id` as a parameter. 

This line `let filteredProfiles = profiles.filter(each => each.id !== id)` uses the `filter` method on the `profiles` array to create a new array called `filteredProfiles`. The `filter` method iterates through each element in the `profiles` array and returns a new array that excludes the profile objects whose `id` matches the provided `id` parameter.

This line `updateProfiles(filteredProfiles)` updates the state of the `profile` array by replacing it with the new filtered array. This causes React to re-render the component and reflect the updated array in the user interface.

---

**STEP 5: Add styles to the component**

Add the following styles below to your `App.css` file;

```react
.App {
  text-align: center;
  margin: 3rem;
}

.profile-card{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 4rem;
}

.card {
  border: 1px solid rgba(0, 0, 0, 0.175);
  border-radius: 10px;
}

.number{
  text-align: right;
  font-weight: 700;
  padding: 0.5rem;
}

.name{
  font-size: 0.9rem;
  font-weight: 600;
}

.profile-pic{
  width: 100%;
  height: 300px;
}

.descr{
  margin-bottom: 1.5rem;
}

.delete-profile{
  padding: 0.6rem;
  outline: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.8rem;
}

.delete-profile:hover{
  background-color: #6a6d6d;
  color: #ffff;
}

.profile-btn{
   background-color: #ebebf2;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 1rem;
  outline: none;
  border: none;
  text-transform: uppercase;
  font-weight: 500;
}

.profile-btn:hover{
  background-color: #9393B2;
  color: #ffff;
}

@media screen and (max-width: 1400px) { 
  .profile-card{
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
  }

  .card{
    margin-top: 3rem;
  }
}

```

---


**Links to the project**

[Live link](https://react-hide-and-show-component.vercel.app/)

[GitHub Link](https://github.com/adetutudeborah/react-hide-and-show-component)

---

## Conclusion

Finally, we have a React component that utilizes `useState` Hook to hide and show components using conditional rendering. We also implemented a delete function that removes a `profile` from the `profiles` state array.