How to useuseState to manage accordion. in ReactJS
- Using React’s useState hook to manage accordion content and user input, ensuring dynamic and responsive data handling.
- Implement event handlers for input changes and accordion toggles, synchronizing user input with corresponding accordion box content.
- Using React-Bootstrap components (Accordion, Card, Button, Form) for UI elements
Example: Below is the implementation of the above approach
Javascript
import React, { useState } from "react";import "bootstrap/dist/css/bootstrap.min.css";import { Accordion, Card, Button, Form } from "react-bootstrap";export default function App() { const [accordionData, setAccordionData] = useState({ 0: "Greetings from Accordion Box 1 :)", 1: "Greetings from Accordion Box 2 :)" }); const [userInput, setUserInput] = useState({ 0: "", 1: "" }); const handleAccordionChange = (eventKey) => { setAccordionData({ ...accordionData, [eventKey]: userInput[eventKey] }); }; const handleInputChange = (event, eventKey) => { setUserInput({ ...userInput, [eventKey]: event.target.value }); }; return ( <div style={{ display: "block", width: 400, padding: 30 }}> <h4>Accordion in React-Bootstrap</h4> <Accordion defaultActiveKey="0"> <Card> <Card.Header> <Accordion.Toggle as={Button} variant="link" eventKey="0"> <span style={{ fontWeight: "bold" }}>JavaScript</span> </Accordion.Toggle> </Card.Header> <Accordion.Collapse eventKey="0"> <Card.Body> <Form.Group> <Form.Control type="text" placeholder="Enter text" value={userInput[0]} onChange={(e) => handleInputChange(e, "0")} /> <Button variant="primary" onClick={() => handleAccordionChange("0")} > Update Content </Button> </Form.Group> {accordionData[0]} </Card.Body> </Accordion.Collapse> </Card> <Card> <Card.Header> <Accordion.Toggle as={Button} variant="link" eventKey="1"> <span style={{ fontWeight: "bold" }}>React.JS</span> </Accordion.Toggle> </Card.Header> <Accordion.Collapse eventKey="1"> <Card.Body> <Form.Group> <Form.Control type="text" placeholder="Enter text" value={userInput[1]} onChange={(e) => handleInputChange(e, "1")} /> <Button variant="primary" onClick={() => handleAccordionChange("1")} > Update Content </Button> </Form.Group> {accordionData[1]} </Card.Body> </Accordion.Collapse> </Card> </Accordion> </div> );} |
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.
Contact Us