score:3
Accepted answer
for your issue :
// means if display is active so nothing else it's active, so everything is active
setdisplay(display === "active" ? "" : "active");
the display variable is shared between each accordion bodies... always the same
do you really need an display
var ?
import react, { fragment, usestate } from "react";
const accordion = ({ items }) => {
const [activeindex, setactiveindex] = usestate(null);
const handlechange = index => {
setactiveindex(activeindex === index ? null : index);
};
const rendereditems = items.map((item, index) => {
return (
<fragment key={item.title}>
<div classname={`${display} title`} onclick={() => handlechange(index)}>
<i classname="dropdown icon"></i>
{item.title}
</div>
<div classname={`${activeindex === index ? 'active' : ''} content`}>
<p>{item.content}</p>
</div>
</fragment>
);
});
return (
<div classname="ui styled accordion">
{rendereditems}
{activeindex}
</div>
);
};
export default accordion;
Source: stackoverflow.com
Related Query
- How to expand and collapse only the first item in accordion using react hooks?
- How to expand and collapse the table rows in plain react js. Show only one row if the description of the row is multiple and show the expand button
- How to hook only the card which is clicked to grow open and reset the previously clicked card to go-back to closed using react functional hooks
- How to click a button into a list array items only effect the related item using React hooks
- React Table using hooks expand and collapse rows
- How can I use useEffect in React to run some code only when the component first mounts, and some other code whenever an event occurs (repeatedly)?
- How do I get my HTML form date input to only allow specific days of the week to be chosen using JavaScript, React and HTML?
- How do I correctly add data from multiple endpoints called inside useEffect to the state object using React Hooks and Context API?
- How do I access the index of a selected item in list using React and Material UI?
- How to add an image in the first react component and ignore in rest of the components using map function
- How to keep the state updated using React hooks and observable design pattern?
- How to show the content and hide the content conditionally in react using hooks
- how to make only one list item expand when clicked- react hooks
- How to Collapse only one div when using React and map
- Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component when using Create React App and Formik
- How to apply a filter only if one of the checkboxes is clicked using react and typescript?
- react with TS - using setInterval with useEffect() how to send the request and only then start the interval
- React Using Hooks and Context without re-renders of a component that uses only uses the setter function
- Using React hooks for the first time and ran into an issue
- How to do a react hooks api call and display only one item
- How to mock history.push with the new React Router Hooks using Jest
- How to prevent child component from re-rendering when using React hooks and memo?
- Using React Router and Webpack 2 how to require external libraries only on certain routes?
- CDN links for React packages and how to import it when using react using the scripts from CDN
- How to create a preview (Image and description) to the Url when shared link on Social media,Gmail and Skype using React JS?
- How to get the changed state after an async action, using React functional hooks
- How to execute store.unsubscribe from useEffect using React hooks and Redux
- How to make the API call and display it in React JS using React Table and Axios?
- React Router V4: How to render a modal in the same screen changing only the url and then with that url, be able to rebuild the whole screen
- How can I cache data that I already requested and access it from the store using React and Redux Toolkit
More Query from same tag
- Is there a way to override style from Semantic-UI with style from Styled-Components in ReactJS?
- React & Redux : cannot read property of undefined
- useState hook in context resets unfocuses input box
- Not Being Able To Retrieve My Data From Firebase V9
- react button scroll to particular div
- Redirect to screen from an api interceptor (outside of component) in React Native
- How to change material UI select border and label
- How to find an object from recursive array of objects that is matching with the id using javascript and react?
- Pagination in React/Typescript
- How to have changeable values in input React JS?
- React Router Switch statement with routes grouped as component inside does not go to Not Found route
- Trying to change the colour of SVG Image Icon upon selection Material UI
- this.props not accessible when using ApolloClient
- log statement in button callback displays undefined
- Javascript Modify First Word
- I'm not able to deploy my MERN App on Heroku
- findDOMNode is deprecated in StrictMode. Warning - react-transition-group + react v17 + Javascript (Not Typescript)
- Changing size of radio buttons
- Get total count of assertions made in a React app using Jest
- How to update a nested state properties with e.target.name in React
- In graphql, what is the best way to combine multiple sources where fields in both sources share a common value?
- Select MenuItem doesn't show when JSX saved to state
- Can't check if document exists in cloud firestore database and with reactjs
- How to set useState initial value of object which is already in my fake data?
- react without constructor declaring state in class's body
- Accessing basename of BrowseRouter
- how could I use useEffect() in Class component?
- React query used multiple times in same component
- Hey how do I convert this JS into react?
- In React Router Dom, redirect not work if i don't press enter or refresh page