如何在 reactJs 中制作常见问题解答部分？

Question

` I am trying to make FAQ section but problem here with my code is when i am clicking open(+)
 Button of particular section it will open all the section and same case with close(-) button 
 also.`

        ```
         export default function App() {
         const [isOpen,setIsOpen] = useState(false)
          return (
      <div className="App">
        <h1>Faq/Accordian</h1>
      <div className="accordian">
       {questions.map((ele)=>(
        <div key={ele.id} className="faq">
         <h3>{ele.title}</h3>
         <button onClick={() => setIsOpen(!isOpen)}>{isOpen ? "-" : "+"}</button>
        {isOpen===true && <h4>{ele.info}</h4>}
         </div>
         ))}
        </div>
       </div>
     );
     }

     ```

我期待当我点击特定的打开按钮时它应该打开那个特定的部分

Answer 1

您可以将选定的索引放在 state 中。

export default function App() {
    const [idx, setIdx] = useState();
    return (
      <div className="App">
        <h1>Faq/Accordian</h1>
        <div className="accordian">
        {questions.map((ele, i)=>(
            <div key={ele.id} className="faq">
             <h3>{ele.title}</h3>
             <button onClick={() => setIdx(i === idx ? undefined : i)}>{i === idx ? "-" : "+"}</button>
            {i === idx && <h4>{ele.info}</h4>}
             </div>
         ))}
        </div>
       </div>
     );
 }