React Js Bootstrap Show and Hide Single Div Tutorial

Last updated on: by Digamber

In this guide, we will share how to show and hide a single div in a group of multiple divs in React js application using the Bootstrap library.

Building features for React web applications might be a bit cumbersome if you are new to React. There are a plethora of React functionalities that we have discussed in the past.

To build the show and hide divs feature in React, we will use the react function component, React useState, and useEffect hooks. We will use the Bootstrap library to add the style to the div and buttons.

We will create a single component and add three buttons and divs using bootstrap. And show the single div while other divs remain closed. Similarly, when the user clicks on another closed div, it will open and close the other remaining divs.

How to Show and Hide Div in React with Bootstrap

  • Step 1: Create React Project
  • Step 2: Add Bootstrap Module
  • Step 3: Build Component File
  • Step 4: Show and Hide Div
  • Step 5: Update Global Component
  • Step 6: Run React Server

Create React Project

We assume you have already installed node, npm in your system, use the following command to create a new react app.

npx create-react-app react-features

You can use the given command to enter into the project.

cd react-features

Add Bootstrap Module

The bootstrap module is completely optional; the primary purpose of using bootstrap is to reduce the UI development time drastically.

Here is the command which will install the module in your react app.

npm i react-bootstrap bootstrap

Build Component File

It is ideal approach to keep the components in specific file, make sure to create the /components, folder with /Home.js file inside of it.

import React from 'react'
function Home() {
  return (
    <div>Home</div>
  )
}
export default Home

Show and Hide Div

The useState hook refers to the id of the current button and div, which we need to show currently. Create an event handler and bind it to the button element with the onClick event handler.

It gives us access to the current element’s id when clicked. To show and hide the div, we are adding the current state in conjunction with the button and div id.

Add the code into the Home.js file.

import React, { useState, useEffect } from 'react'
function Home() {
  const [isActive, setIsActive] = useState({
    id: 'divOne',
  })
  useEffect(() => {
    console.log(isActive)
  }, [isActive])
  const hideShowDiv = (e) => {
    setIsActive({
      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="divOne"
            onClick={(e) => {
              hideShowDiv(e)
            }}
            className="btn btn-danger"
          >
            Show
          </button>
        </div>
        <div className={isActive.id === 'divOne' ? `divOne` : 'divOne d-none'}>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
        </div>
      </div>
      <div className="col-4">
        <div className="d-grid mb-4">
          <button
            id="divTwo"
            onClick={(e) => {
              hideShowDiv(e)
            }}
            className="btn btn-success"
          >
            Show
          </button>
        </div>
        <div className={isActive.id === 'divTwo' ? `divTwo` : 'divTwo d-none'}>
          <p>
            Pellentesque molestie ipsum nisl, vel convallis nisl scelerisque et.
          </p>
        </div>
      </div>
      <div className="col-4">
        <div className="d-grid mb-4">
          <button
            id="divThree"
            onClick={(e) => {
              hideShowDiv(e)
            }}
            className="btn btn-primary"
          >
            Show
          </button>
        </div>
        <div
          className={isActive.id === 'divThree' ? `divThree` : 'divTwo d-none'}
        >
          <p>
            Sed suscipit, nunc et malesuada imperdiet, massa justo sollicitudin
            ligula.
          </p>
        </div>
      </div>
    </div>
  )
}
export default Home

Update Global Component

App component is being used to serve the react app, therefore we need to register the Home component into the App.js file.

import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import './App.css'
import Home from './components/Home'
export default function App() {
  return (
    <div className="container mt-5">
      <Home />
    </div>
  )
}

Run React Server

Head over to the terminal, add the given command on the console then hit enter.

npm start

Your app will be served on the given url.

http://localhost:3000

React Js Bootstrap Show and Hide Single Div Tutorial

Summary

In this short post, we have revealed how to show and hide div within the functional component in a React js application.

Digamber

I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.