How to useReact-Bootstrap Components in ReactJS

Approach 2: Using useState to manage accordion.

In this approach we use React-Bootstrap components, such as Accordion, Card, and Button, to build an interactive accordion menu.
State Management: It employs React’s useState hook to manage the active accordion section, providing a smooth user experience.
Dynamic Content: The accordion dynamically renders sections with titles and content, making it ideal for displaying expandable information in a neat format.

Example: Below is the implementation of the above approach

Javascript

import React, { useState } from "react";
import Accordion from "react-bootstrap/Accordion";
import Card from "react-bootstrap/Card";
import Button from "react-bootstrap/Button";
import "bootstrap/dist/css/bootstrap.min.css";
 
function AccordionMenu() {
    // Set the default active key
    const [activeKey, setActiveKey] = useState("0");
 
    const sections = [
        {
            title: "HTML",
            content: `HTML stands for HyperText Markup Language. 
                      It is used to design the web pages. 
                      With the help of HTML, you can create 
                      a complete website structure. HTML is the 
                      combination of Hypertext and Markup language.`
        },
        {
            title: "CSS",
            content: `CSS (Cascading Style Sheets) is used to 
                      styles web pages. Cascading Style Sheets 
                      are fondly referred to as CSS. The reason
                      for using this is to simplify the process 
                      of making web pages presentable.`
        },
        {
            title: "JavaScript",
            content: `JavaScript is a lightweight, 
                      cross-platform, single-threaded...`
        }
    ];
 
    const handleAccordionClick = (index) => {
        setActiveKey(activeKey ===
            index ? null : index);
    };
 
    return (
        <div className="container">
            <h2 className="text-success">
                w3wiki
            </h2>
            <h3>Accordion menu</h3>
            <Accordion activeKey={activeKey}>
                {sections.map((section, index) => (
                    <Card key={index}>
                        <Card.Header>
                            <Accordion.Toggle
                                as={Button}
                                variant="link"
                                // Convert index to a string
                                eventKey={index.toString()}
                                onClick={
                                    () =>
                                        handleAccordionClick(index.toString())}>
                                {section.title}
                            </Accordion.Toggle>
                        </Card.Header>
                        <Accordion.Collapse
                            eventKey={index.toString()}>
                            <Card.Body>
                                {section.content}
                            </Card.Body>
                        </Accordion.Collapse>
                    </Card>
                ))}
            </Accordion>
        </div>
    );
}
 
export default AccordionMenu;

Output:

React-Bootstrap Custom Accordions

React-Bootstrap Custom Accordions are user-defined collapsible panels or sections in a web application built with React and the React-Bootstrap library. Developers can customize their behavior and appearance to create interactive and styled accordion components for displaying content.

Tags:

#Geeks Premier League 2023 #React-Bootstrap #Geeks Premier League #ReactJS #Web Technologies

Project Structure:

Approach 2: Using useState to manage accordion.

How to useReact-Bootstrap Components in ReactJS

Javascript

React-Bootstrap Custom Accordions

Similar Reads