How to install and use accordion in react js?

Hi Friends πŸ‘‹,

Welcome To aGuideHub!

To install and use accordion in React js, you have to use the npm or yarn package manager that is how you can install the antd library into your project.

Today, I am going to show you, how to install and use accordion in react js.

Install Antd

Install the following packages to use antd in react js.

npm

npm install antd

yarn

yarn install antd

Table of contents

  • Create a new React JS project.
  • Import the Accordion component.
  • Use accordion components in the project.

Let’s start with the first step.

Step 1: Create a new React JS project.

First you have to install the React project. You should use create-react-app command to create a new React project.

npx create-react-app my-app
cd my-app
npm start

Step 2: Import the Accordion component.

After installing antd, you have to import your React component. To do this, add the following line to the top of your component file.

import React, { useState } from "react";
import { Collapse } from "antd";

Step 3: Use accordion components in the project.

In this blog, see the short example to use Collapse and Panel component from ant design library.

<Collapse activeKey={activeKey} onChange={handleAccordionChange}>
    <Panel header="Item 1" key="1">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </Panel>
      <Panel header="Item 2" key="2">
        <p>
          Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
      </Panel>
      <Panel header="Item 3" key="3">
        <p>
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
      </p>
    </Panel>
</Collapse>

ReactJS use accordion example.

This code below is an example, we will import the Collapse component from antd library, use the Panel component, and provide attribute details to use accordion in react js.

App.js

import React, { useState } from "react";
import { Collapse } from "antd";

const { Panel } = Collapse;

const Accordion = () => {
  const [activeKey, setActiveKey] = useState(null);

  const handleAccordionChange = (key) => {
    setActiveKey(key === activeKey ? null : key);
  };

  return (
    <Collapse activeKey={activeKey} onChange={handleAccordionChange}>
      <Panel header="Item 1" key="1">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </Panel>
      <Panel header="Item 2" key="2">
        <p>
          Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
      </Panel>
      <Panel header="Item 3" key="3">
        <p>
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
        </p>
      </Panel>
    </Collapse>
  );
};

export default Accordion;

Check the output of the above code example.

React, accordion

Here, we are provided code sandbox links for the above program to install and use accordion in React js. Then you can use whenever you went and do the changes as per your requirements.

Try it Yourself

All the best πŸ‘

Premium Content

You can get all the below premium content directly in your mail when you subscribe us

Books

Interview Questions

Soon You will get CSS, JavaScript, React Js, and TypeScript So Subscribe to it.

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

Related Posts