How to open one dropdown item?

Question

friends, I have array of questions, and a dropdown list for them... i want to open any question, but all questions are opening together... please help

const FAQ = () => {
    

    const [isOpenAnswer, setIsOpenAnswer] = useState(false)
     const toggle = (id) => {
        questions.forEach((q) => {
            if(q.id === id){
                setIsOpenAnswer((prevState) => !prevState)
            }
        })
    }

    return <Layout>
      
        <div className="questionsBox pb-5">
            <h2 className="title pt-4 pb-4" >Frequently Asked Questions</h2>
            {questions.map((q, index) => {
                return <div className="question pl-1 pt-3 pb-3 pr-1" key={index}>
                    <div className="d-flex justify-content-between">
                        <span className="questionTitle">{q.question}</span>
                        <img className="questionIcon" 
                             src={Plus} alt="plus" 
                             onClick={() => toggle(q.id)}
                        />
                    </div>
                    {isOpenAnswer && <p className="answer pt-2 pb-2">
                        {q.answer}
                        <a href="" className="link">{q.source}</a>
                    </p>}
                </div>
            })}
        </div>
    </Layout>
}

Answer 1

Use a Javascript object to track which unique q.id is being set to true.

const FAQ = () => {
    const [isOpenAnswer, setIsOpenAnswer] = useState({})
     const toggle = (id) => {
        setIsOpenAnswer(prevState => ({
          ...prevState,
          [id]: !prevState[id],
        });
    }

    return <Layout>
        <div className="questionsBox pb-5">
            <h2 className="title pt-4 pb-4" >Frequently Asked Questions</h2>
            {questions.map((q, index) => {
                return <div className="question pl-1 pt-3 pb-3 pr-1" key={index}>
                    <div className="d-flex justify-content-between">
                        <span className="questionTitle">{q.question}</span>
                        <img className="questionIcon" 
                             src={Plus} alt="plus" 
                             onClick={() => toggle(q.id)}
                        />
                    </div>
                    {isOpenAnswer[q.id] && <p className="answer pt-2 pb-2">
                        {q.answer}
                        <a href="" className="link">{q.source}</a>
                    </p>}
                </div>
            })}
        </div>
    </Layout>
}