Quiero que se haga clic en el acordeón para que se abra, como mostrar la descripción que tiene. Pero aquí, cuando hago clic en uno de ellos, todos se abren al mismo tiempo. Estoy obteniendo datos de un archivo js local y los datos son simplemente una lista de objetos que contienen dos cosas: preguntas y respuestas.
const [ show,setShow ] = useState(false) return ( <div className="Faq"> { Faq_Data.map((value, index) => { return(<div className="Faq_Item" key={index}> <div className="Faq_Item_Plate" onClick={()=>setShow(!show)} > <div className="Faq_Item_Button"> {value.ques} </div> <img src="/img/critical/plus.png" alt="" /> </div> { show && <div className="Faq_Item_Desc">{value.ans}</div> } </div>) }) } </div>Todos sus acordeones se están abriendo porque todos usan el mismo valor show . Necesitará valores individuales para todos los diferentes acordeones para lograr lo que desea.
Una solución sería almacenar una matriz de boolean :
// Initialise the state with an array of `false` values, // each value corresponding to an element of the data array const [shown, setShown] = useState(Array.from(faqData).fill(false)); return faqData.map( // Only do this if you don't have a unique id you could use instead of the index // See https://reactjs.org/docs/lists-and-keys.html#keys (faqItem, index) => <div key={index}> <button onClick={() => setShown( arr => arr.map( (tmpShow, tmpIdx) => index === tmpIdx ? !tmpShow : tmpShow ) )}> {faqItem.question} </button> {shown[i] && <div>{faqItem.answer}</div>} </div> ); Pero la solución mejor y más idiomática sería tener componentes de acordeón separados que acepten los detalles de la pregunta como props y manejen su propio estado "abierto/cerrado". También debe considerar usar el elemento <details> en lugar de <div> s, tanto porque es semánticamente correcto aquí como porque maneja el comportamiento que parece estar buscando sin ninguna codificación adicional de su parte.