This detailed guide will show you how to eloquently integrate bootstrap collapse in React js application using the React Bootstrap module from absolute scratch.

Bootstrap is a CSS framework that helps you build user interface components. Bootstrap contains certain plugins that require jQuery; therefore, we are going to install React bootstrap library.

React bootstrap offers custom-made plugins that don’t require third-party JavaScript or jQuery.

To build the bootstrap collapse panel in React, we will be creating everything from scratch. Let’s understand what a collapse panel is?

It is a JavaScript plugin used for showing and hiding content (text, images). Ideally, collapse is invoked by binding certain events to the Buttons or anchors.

How to Create Collapse Component in React using Bootstrap

• Step 1: Create React Project
• Step 2: Add React Bootstrap Module
• Step 3: Create Component File
• Step 4: Build Bootstrap Collapse in React
• Step 5: Register Component in App
• Step 6: Run Application

Create React Project

You can create a new react app using the following command, however you may skip this step if app is already created.

npx create-react-app react-howdy

Next, head over to the project directory.

cd react-howdy

Add React Bootstrap Module

In this step, you have to install the react-bootstrap modules in the react app, make sure to execute the given command.

npm install react-bootstrap bootstrap

Add the bootstrap css in main App.js file as suggested below.

import '../node_modules/bootstrap/dist/css/bootstrap.min.css'

Create Component File

In the next step, ensure to create /components folder, and also make the /CollapsePanel.js file.

import React from 'react'

export default function CollapsePanel() {
  return (
    <h2>React Collapse Example</h2>
  )
}

Build Bootstrap Collapse in React

Now, you have to import the given code into the CollapsePanel.js file, this code will make the collapse UI component in React.

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

export default function CollapsePanel() {
  const [isCollapseOpen, setCollapse] = React.useState(false)

  const initCollapse = () => {
    return setCollapse(!isCollapseOpen)
  }

  return (
    <>
      <h2 className="mb-3">React Bootstrap Collapse Panel Example</h2>

      <Button variant="danger" onClick={initCollapse} className="mb-5">
        Open Bootstrap Collapse
      </Button>

      <Collapse in={isCollapseOpen}>
        <div id="collapsePanel">
          <div className="card card-body">
            “You can't go to the ball looking like that!” “But we have to hurry,
            because even miracles take a little time.” “I'd say the first thing
            you need is ... a pumpkin.” “You can't go to the ball without a
            horse.
          </div>
        </div>
      </Collapse>
    </>
  )
}

Register Component in App

Eventually, the last step is to register the collapse component in the App.js file.

Respectively, import and add the component tag into the file.

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

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

export default App

Run Application

Now, all the efforts have been put, lets run the app development server. You can do that by executing the given code from the terminal.

npm start

To test the feature move onto the frontend of the application that is visible onto the browser window.

Conclusion

In this tutorial, we have learned how to create a collapse panel in React application.

To build the React collapse component, we installed the react-bootstrap module and implemented the bootstrap collapse using the React useState hook.