What is the best method for showcasing various content using a uniform accordion style in React?

What is the most efficient way to display various content within multiple accordions? view image description here This is the current approach I am taking in my project, where shipping information and delivery options will involve different textboxes, labels, and input boxes.

Currently, I am manually coding each label, input box, and textbox for the different accordions, but I believe this method is not optimal. Hardcoding all these elements makes my code lengthy for just one page. Below is a snippet of how I am hardcoding everything. Should I consider splitting the different accordions into separate React classes to streamline the code?

<div className="dropdown-header" onClick={toggle}>
    <h4 className="dropdown-text">Shipping Information</h4>
    <span className="dropdown-selection">{selected ? '-' : '+'}</span>
</div>
{selected && (<div className="wrapper">
    <div className="row">
        <div className="col-md-6">
            <div className="info-group mb-3">
                <label>First Name</label>
                <input type="text" className="info-input" name="firstname" />
            </div>
        </div>
        <div className="col-md-6">
            <div className="info-group mb-3">
                <label>Last Name</label>
                <input type="text" className="info-input" name="firstname" />
            </div>
javascriptcssreactjstwitter-bootstrap

Answer №1

To maximize reusability, it's important to create components for elements that will be used repeatedly and customize them by passing different parameters.

Check out this resource: https://react.dev/learn/your-first-component

Here's an example:

export function AccordionExample({heading, label1, label2}) {
 return (
  <div className="dropdown-header" onClick={toggle}>
    <h4 className="dropdown-text">{heading}</h4>
    <span className="dropdown-selection">{selected ? '-' : '+'}</span>
  </div>
  {selected && (<div className="wrapper">
    <div className="row">
      <div className="col-md-6">
        <div className="info-group mb-3">
          <label>{label1}</label>
          <input type="text" className="info-input" name="firstname" />
        </div>
      </div>
      <div className="col-md-6">
        <div className="info-group mb-3">
          <label>{label2}</label>
          <input type="text" className="info-input" name="lastname" />
        </div>
      </div>
    </div>
  } 
  );
}

Simply use the component with specific parameters like this:

<AccordionExample heading="Shipping Information" label1="First Name" label2="Last Name" />
<AccordionExample heading="Delivery Option" label1="Option One" label2="Option Two" />

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The onClick event cannot be triggered within a div that is generated dynamically

I am having an issue with a jquery code that dynamically generates a div. The problem I'm facing is that the onclick function for the anchor tag is not calling the required function. Below is the code snippet: $("#new").append(' <ul cla ...

javascriptjqueryhtmlajax

script loop causing an embedded form

While trying to include a Hubspot embedded form on a page using a script, I encountered an issue. I utilized onMounted to ensure the form is displayed correctly. However, upon leaving and re-entering the component where the form is located, an additional b ...

javascriptvue.js

What is the best method for choosing all options in a select box in IE without experiencing the scrolling effect?

Here's the scenario: I have a select element with multiple options and a checkbox that allows users to select/deselect all options. The issue arises in Internet Explorer, where selecting all options using code causes the entire select box to scroll un ...

javascriptjqueryselect

ways to dynamically retrieve input values in PHP

Is there a way to dynamically add and remove data fields, as well as increase and decrease fields dynamically in PHP? I am looking to retrieve the subject value in an array or JSON format using PHP only. https://i.stack.imgur.com/HqDCz.png <div data-ro ...

javascriptphphtml

What is the best way to indicate the selected radio button and expand only the child div below it upon user click?

My current task involves working with an array of nested objects to create a tab layout. https://i.stack.imgur.com/wMJvF.png Although key values are present for all elements, I am still getting an error message indicating that the key is missing (refer t ...

reactjsnext.jsradio-button

Achieving Right Alignment of SVG Next to an <h4> in Bootstrap 5

I'm encountering an issue where I am attempting to align an SVG icon to the right of an H4 element and center it vertically using Bootstrap 5, but it's not working as intended. <div class="container-fluid"> <div class="r ...

cssflexboxbootstrap-5right-align

Creating a function that writes to a file by utilizing the data input from

After running the provided code snippet, it successfully works in a standalone project. However, I am interested in making modifications to replace the variable "sample_text" with an output that is displayed in the terminal instead of being hardcoded int ...

javascriptnode.jsselenium-webdriverwritefile

What is the best way to customize a MaterialUI outlined input using a global theme overrides file?

I've been working on customizing my theme file with overrides, and I've encountered a strange bug while trying to style the outlined input. It seems like there are two borders appearing when these styles are implemented. https://i.stack.imgur.co ...

javascriptcssreactjstypescriptmaterial-ui

Inadvertent scroll actions causing unexpected value changes in Material UI sliders

I am currently working on a React application that utilizes Material UI, with slider components integrated throughout the interface. However, I have encountered an issue when using a touch screen device - unintentional changes to the slider values occur wh ...

javascriptreactjsmaterial-ui

Tips for distinguishing between submit() and other JavaScript functions, and understanding why submit() may not be functioning as expected

In the table, I have a list of users with "update" and "delete" links added at the end of each line. To enable this functionality, I implemented a JavaScript function that captures the user ID, sets another field to "true," and inserts these values into a ...

javascriptasp.net

The error message indicates that the property 'current' is not found in the type '[boolean, Dispatch<SetStateAction<boolean>>]'

During my React/Typescript project, I encountered an issue involving cursor animations. While researching the topic, I stumbled upon a CodePen (Animated Cursor React Component) that functioned perfectly. However, when attempting to convert it into a Types ...

javascriptreactjstypescript

Error: Attempting to access the balance property of an undefined variable is causing a TypeError

I currently have 5 state objects, and I am encountering an issue when trying to submit a form with the 5 updated state objects. There is also an onChange method in place to handle the new state and render it to a clients list page. The error lies within t ...

reactjsformsreact-reduxonsubmit

There appears to be a malfunction with WebRupee

I have incorporated the new rupee sign into my website to represent Indian currency. Below is the code snippet I used: For the script, I included " and also added the following: <span class="WebRupee">Rs.</span> 116,754.00 To style it using ...

javascriptcss

CSS3 family tree tutorial: Incorporating a wife into the design

I came across a fascinating tutorial about creating a family tree using CSS3 only. However, I'm struggling to understand how to depict a marriage. To explain further: What the code currently accomplishes is this: what i aim to include is this: Alth ...

htmlcssfamily-tree

Center the navigation links within the navigation block

I am using the startbootstrap-small-business template and customizing it to fit my requirements. I have inserted a new logo which caused me to adjust the height of the navbar to approximately 120px. Now, my goal is to vertically align the links on the righ ...

htmlcsstwitter-bootstrap

Retrieve the result of useEffect based on a condition, Execute the hook only when a specific condition is met

I have a situation where customized hooks for context and authentication have been implemented in the code. My goal is to incorporate a route layout provider and execute those hooks within that component to specifically impact certain routes. Creating Rou ...

reactjsreact-hooks

There seems to be a complete absence of rendering in this particular vue

Upon initializing a fresh Vue project using Vue CLI 3 and removing all default views and components, I proceeded to add two new views. To my surprise, these views did not render when changing the URL; instead, I was met with a blank page and no error messa ...

javascriptvue.jsvuejs2vue-router

Utilizing $.getJSON to initiate a selection change event

I'm currently working on implementing a feature that involves adding categories to a dropdown list using jQuery Ajax. The goal is to load subcategories when a particular option is selected. However, I've encountered an issue where the addition o ...

javascriptjquery

What is the proper way to document instance members that have been added through Object.defineProperties()?

I am struggling with JSDoc 3 recognizing instance properties defined using Object.defineProperties in my class. Here is a simplified version of the code I am working on: /** @exports mymodule */ function mymodule(exports) { /** @constructor * @p ...

javascriptjsdoc

Update the image on a webpage by simply clicking on the current image

Hey there, I'm looking to implement a feature where users can choose an image by clicking on the current image itself. Here's my code snippet. The variable url holds the default image. My goal is to make the current image clickable so that when ...

htmlcssangulartypescript