How to Hide and Show Div in React Js using Bootstrap

When developing a React app, sometimes you need to show and hide div in React app.

If you are new to React world, finding the answers for tiny things becomes tedious. Isn’t it?

Thus, we created this tutorial. This tutorial will help you get the answers in a series of steps. We’ll guide you in understanding how to show and hide div components in React.

React js is becoming the first choice for web application development. There are plenty of features in React; that are possibly a bit difficult to learn for new developers.

Today, in this tutorial, we’ll explore: how to hide and show div elements when a button is clicked in a React js application.

Styling the React components with CSS is a bit of time taking process. Here is why, in this guide, we’ll not write CSS from scratch. Instead, we’ll take the help of the Bootstrap 5 library.

  • Step 1: Install React App
  • Step 2: Install Bootstrap Library
  • Step 3: Create New Component
  • Step 4: Create Hide / Show Div
  • Step 5: Register Component in App
  • Step 6: Start Development Server

Install React App

Head over to the terminal app. On the console, type the given command. Then, execute the command to create a React app.

npx create-react-app react-features

Install Bootstrap Library

The second task is to install the bootstrap library using the given command.

npm install bootstrap

Create New Component

Next, in the app folder: make the /components/ folder, thereafter, make the Home.js file with the given code.

import React from 'react'

function Home() {
  return (
    <div>Home</div>
  )
}

export default Home

Create Hide / Show Div

In the previous step, we created a component. Now, you need to open the Home.js component; in this file, you must add all the code line by line.

import React, { useState, useEffect } from "react";

function Home() {
  const [isVisible, setIsVisible] = useState({
    id: "comOne",
  });

  useEffect(() => {
    console.log(isVisible);
  }, [isVisible]);

  const toggleDiv = (e) => {
    setIsVisible({
      id: e.target.id,
    });
  };

  return (
    <div className="row">
      <h2 className="mb-5 text-center">
        React Hide and Show Single Div Example
      </h2>

      <div className="col-4">
        <div className="d-grid mb-4">
          <button
            id="comOne"
            onClick={(e) => {
              toggleDiv(e);
            }}
            className="btn btn-primary"
          >
            Show
          </button>
        </div>
        <div className={isVisible.id === "comOne" ? `comOne` : "comOne d-none"}>
          <p>
            Donec vehicula erat id tellus suscipit laoreet. Suspendisse
            vestibulum auctor velit sit amet luctus. Sed semper turpis id quam
            ullamcorper, elementum aliquet augue mattis.
          </p>
        </div>
      </div>

      <div className="col-4">
        <div className="d-grid mb-4">
          <button
            id="comTwo"
            onClick={(e) => {
              toggleDiv(e);
            }}
            className="btn btn-success"
          >
            Show
          </button>
        </div>

        <div className={isVisible.id === "comTwo" ? `comTwo` : "comTwo d-none"}>
          <p>
            Donec vehicula erat id tellus suscipit laoreet. Suspendisse
            vestibulum auctor velit sit amet luctus. Sed semper turpis id quam
            ullamcorper, elementum aliquet augue mattis.
          </p>
        </div>
      </div>

      <div className="col-4">
        <div className="d-grid mb-4">
          <button
            id="comThree"
            onClick={(e) => {
              toggleDiv(e);
            }}
            className="btn btn-dark"
          >
            Show
          </button>
        </div>
        <div
          className={isVisible.id === "comThree" ? `comThree` : "comTwo d-none"}
        >
          <p>
            Donec vehicula erat id tellus suscipit laoreet. Suspendisse
            vestibulum auctor velit sit amet luctus. Sed semper turpis id quam
            ullamcorper, elementum aliquet augue mattis.
          </p>
        </div>
      </div>
    </div>
  );
}

export default Home;

Register Component in App

The final task is yet to be completed: head over to the global component (App.js), import, and add the Home component in the App function.

import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import Home from './components/Home'

export default function App() {
  return (
    <div className="container">
      <Home />
    </div>
  )
}

Start Development Server

You have to lastly run the React app with npm start command, and check the app with given url on the browser.

npm start
http://localhost:3000

How to Hide and Show Div in React Js using Bootstrap

Summary

Hurray, we’ve created the feature that we promised!

We covered a few concepts in bits and pieces: use of function component with hooks in React and hide/show a div at a time in React.

We learned to set and use React hooks in a functional component, useState, and useEffect hooks help us show a single div element at a time among other divs.

The React Hide and Show Div component example is over.

Have a good day!