How to Make An Accordion in React JS

Hey guys, today we are going to learn How to Make an Accordion in React JS, I will teach you everything from scratch without using third-party libraries or built-in components. Many websites are using the Accordion to display the Questions and also answers.

Introduce the idea of accordions in net improvement and their usefulness in organizing content material effectively. Briefly point out that React JS supplies a handy option to implement accordions for net purposes.

Clarify what accordions are and the way they operate. Describe their attribute characteristic of hiding and revealing content material sections upon person interplay, normally by way of clicks.

How to Make An Accordion in React JS

Let’s see the tutorial that I made, before moving the codes, you should watch the video tutorial that will help you to understand everything step by step from scratch.

I Hope you’ve watched the video till to end and you’ve got many new ideas from it, let’s look at the source codes that I used inside the project.

You May Also Like:

• HTML CSS and JavaScript Project For Beginners
• How to Make a Game Using HTML CSS and JavaScript
• Make a Website Using HTML CSS and JavaScript
• eCommerce Product Page using HTML CSS and JavaScript
• Personal Portfolio Website only using HTML and CSS

Setting Up Your React JS Project

Information readers by way of establishing a primary React JS venture if they have not already. Point out creating a brand new venture utilizing create-react-app or any most popular techniques.

npm create vite@latest

Putting in Dependencies

Clarify the dependencies required for implementing accordions in React JS, corresponding to react and react-dom. Present directions on setting up these dependencies utilizing npm or yarn.

cd my-project

npm install
npm run dev

Creating the Accordion Element

Describe the method of making a reusable Accordion element in React JS. Break down the element’s construction and performance, together with state administration for monitoring open/shut states.

import faqs from "../data";
import { Accordion } from "./Accordion";

function App() {
  return (
    <div className="container">
      <Accordion data={faqs} />
    </div>
  );
}

export default App;

Once you make a App.jsx, then the next thing you need make another file namely Accordion.jsx, Let’s see the codes that are used on the Accordion file.

import React, { useState } from "react";
import { AccordionItem } from "./AccordionItem";

export function Accordion({ data }) {
  const [curOpen, setCurOpen] = useState(false);

  return (
    <div>
      {data.map((el, num) => {
        return (
          <AccordionItem
            title={el.title}
            key={num}
            curOpen={curOpen}
            setCurOpen={setCurOpen}
            num={num}
          >
            {el.text}
          </AccordionItem>
        );
      })}
    </div>
  );
}

Finally, you need to make a file namely AccordionItem.jsx inside the file you need to display the content handle the event and so on I’m going to share the codes mentioned below.

import React from "react";

export function AccordionItem({ title, children, setCurOpen, curOpen, num }) {
  const isOpen = num === curOpen;

  function handleToggle() {
    setCurOpen(isOpen ? null : num);
  }

  return (
    <div className={`header ${isOpen ? "open" : ""}`} onClick={handleToggle}>
      <div className="title">
        <h2>{title}</h2>
        <p className="icon">{isOpen ? "-" : "+"}</p>
      </div>
      {isOpen && <div className="content">{children}</div>}
    </div>
  );
}

Styling the Accordion

Focus on completely different approaches to styling the accordion element, corresponding to utilizing CSS-in-JS libraries like styled components or conventional CSS records. Present examples of primary styling to boost the looks of the accordion.

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: #ddd;
  font-family: "poppins", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.container {
  width: 650px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}

.header {
  display: flex;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
  background-color: #ffffff;
  margin: 1rem 0;
  cursor: pointer;
  padding: 1rem 2rem;
  position: relative;
}

.header .title,
.header .content {
  color: #212a3c;
}

.open {
  border-top: 4px solid #0875f5;
}

.icon {
  font-size: 2rem;
  position: absolute;
  right: 20px;
  top: 10px;
}

.content {
  display: none;
}

.header.open {
  display: flex;
  flex-direction: column;
}

.header.open .content {
  display: block;
}

Including Content material for the Accordion

Clarify and add content material to the accordion element, each when it comes to textual content and different React elements. Emphasize the pliability of accordions in accommodating numerous varieties of content material.

Dealing with Accordion Occasions

Cowl occasion dealing with the accordion element, corresponding to toggling the open/shut state upon person interplay. Present clear examples of dealing with click-on occasions to broaden or collapse accordion sections.

Testing the Accordion Element

Briefly contact upon the significance of testing React elements, together with accordions, to make sure their reliability and performance. Advocate instruments like Jest and React Testing Library for testing React elements.

How to Upload React JS Project on Server

Once you developed the app using React JS you should deploy it on Online Service or Cpanel. So, I’m going to share with you the complete tutorial that are help you to display your project around the world If you want.

Conclusion

Summarize the important thing factors coated within the article. Reinforce the simplicity and effectiveness of implementing accordions in React JS. Encourage readers to experiment with completely different options and customization choices to tailor accordions to their particular wants.