React 18 Hide & Show with React Bootstrap Collapse Tutorial

Last Updated on March 4, 2024 by Digamber in React JS

React show and hide example. In this tutorial, we will show you how to step by step implement the react collapse panel in React js app.

To build the collapse panel in React, we will install and configure React Bootstrap and Bootstrap packages.

React Bootstrap is a handy UI framework that is exclusively developed for React js. Bootstrap offers tons of UI components.

However, it requires jQuery to serve its JavaScript-based component.

React bootstrap works without the need of jQuery, and it offers plenty of other UI components that can be easily added to React js app.

How to Implement React Bootstrap Collapse in React Js

• Step 1: Generate React App
• Step 2: Formulate Component File
• Step 3: Install Bootstrap Package
• Step 4: Create Hide and Show Component
• Step 5: Add Collapse Component in React
• Step 6: Serve React Application

Generate React App

Let us first, open the terminal immediately after head over to command-prompt, type and then execute the provided command.

npx create-react-app react-demo

Now, move into the project folder.

cd react-demo

Formulate Component File

Generate a new folder, name it /components, then make the /HideShow.js file.

Here is a basic functional component looks alike in React.

import React from 'react'


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

export default HideShow;

Install Bootstrap Package

Run the provided command for installing the bootstrap and react-bootstrap packages in the react app.

npm i react-bootstrap bootstrap --legacy-peer-deps

Create Hide and Show Component

Head over to components folder, look for HideShow.js file, insert the provided code within the file.

import React, { useState } from 'react'
import { Button, Collapse } from 'react-bootstrap'

function HideShow() {
  const [isVisible, initHs] = useState(false)

  const invokeCollapse = () => {
    return initHs(!isVisible)
  }

  return (
    <div>
      <h2 className="mb-2">React Hide and Show Collapse Panel Example</h2>

      <Button variant="success" className="mb-4" onClick={invokeCollapse}>
        Show Panel
      </Button>

      <Collapse in={isVisible}>
        <div id="collapsePanel">
          <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a
            dignissim nisl. Sed sed mauris elit. Ut efficitur scelerisque
            facilisis. Cras consectetur leo mauris, et interdum lectus hendrerit
            eu.
          </div>
        </div>
      </Collapse>
    </div>
  )
}

export default HideShow

In the file, first, import Button and Collapse named modules from the ‘react-bootstrap’ library.

To handle the collapse component state, import the useState hook, and define the state with isVisible, initHs variables.

Make sure to set the state false so that it remains closed unless it is opened.

Add Collapse Component in React

In order to work the collapse component, you have to add the HideShow component in App.js file.

import React from 'react'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'

import HideShow from './components/HideShow'

function App() {
  return (
    <div className="container mt-5">
      <HideShow />
    </div>
  )
}

export default App

Serve React Application

To run the react project, ensure that your react server is running.

Here is the command that needs to be invoked from the terminal’s window.

npm start

You can now see the app on the browser using the given url:

http://localhost:3000

Summary

In this guide, we understood how to use Bootstrap Collapse to show and hide a single panel in React js application.

We tried to build a component that can show and hide the content on buttons click using the collapse component.