Want to display only one answer at a time

Question

I have a list of Questions on my page, clicking on a question displays the answer. I want to display only one answer at a time, so when a user clicks on a question, the page displays only the answer to that question and hides the rest of the answers.

the data file

const Data = [
    {
        q:'How many team numbers can I invite', 
        a:'Probably 5 is possible '
    },
    {
        q:'How do I reset my password',
        a:'Click “Forgot password” from the login page or “Change password” from your profile page.A reset link will be emailed to you.'
    },
    {
        q:'Can I cancel my subscription?', 
        a:'Yes! Send us a message and we’ll process your request no questions asked.'
    },
    {
        q:'Do you provide additional support?', 
        a:'Chat and email support is available 24/7. Phone lines are open during normal business hours.'
    }
  ]

this is the app.js file

      <div className="body">
        <div className="card">
            <div className="picWrapper">
              <img className="women" src={pic1} alt="" />
              <img className="box" src={pic2} alt="" />
              <img className="shadow" src={pic3} alt="" />
            </div>
            <div className="content">
              <h1>FAQ</h1>
              {Data.map((faq,i) => (<Question key={"faq_" + i} question={faq.q} answer={faq.a} />))}

            </div>
          </div>
        </div>


      )

the question component-----------

 const [open,setOpen] = useState(false)

        const handleClick = () =>{
              setOpen(!open)

        }
        return (
            <div className="container">
                <div className="text">
                    <p className="question" 
                    style={{ fontWeight: open ? '700' : '400'}} onClick={handleClick}>{props.question}?</p>
                    <p className="answer" 
                    style={{ display: open ? 'block' : 'none',color: open ? 'hsl(237, 12%, 33%)' : 'hsl(240, 6%, 50%)'}}> {props.answer}</p>
                </div>
                <img className="arrow" src={arrow} alt="" onClick={handleClick} style={{transform: open ? 'scaleY(-1)':'scaleY(1)',transition:'all 0.3s ease-in-out'}} />
            </div>

        )

I need the way that can help me to reach this approach because right now when I open all the questions it become out of the div

the netlify link https://amazing-wright-0ca5db.netlify.app/

Answer 1

You need to remove your state from your question component and lift it up. (put it in your main app)

So in your main app have a current question open state:

 const [openQuestion, setOpenQuestion] = useState(1); 

Then on your question component, check to see if the currentOpenQuestion is equal to the index. If so, it should be open, if not, it should be closed. Then add a onClick here and in the component that when clicked, will change the state to the current open question.

 {Data.map((faq, i) => (
        <Question
          onClick={(id) => setOpenQuestion(id)}
          key={"faq_" + i}
          id={i}
          open={openQuestion === i}
          question={faq.q}
          answer={faq.a}
        />
      ))}

const Question = ({ question, answer, open, onClick, id }) => {
  return (
    <div className="container">
      <div className="text">
        <p
          className="question"
          style={{ fontWeight: open ? "700" : "400" }}
          onClick={() => onClick(id)}
        >
          {question}?
        </p>
        <p
          className="answer"
          style={{
            display: open ? "block" : "none",
            color: open ? "hsl(237, 12%, 33%)" : "hsl(240, 6%, 50%)"
          }}
        >
          {" "}
          {answer}
        </p>
      </div>
      <img
        className="arrow"
        src="https://www.google.com/url?sa=i&url=https%3A%2F%2Fthenounproject.com%2Fterm%2Fright-arrow%2F&psig=AOvVaw1tuHEwUUcX4nlUkFuhtuhb&ust=1612026978926000&source=images&cd=vfe&ved=2ahUKEwimuuzM0sHuAhWIh54KHQ6RBasQjRx6BAgAEAc"
        alt=""
        style={{
          transform: open ? "scaleY(-1)" : "scaleY(1)",
          transition: "all 0.3s ease-in-out"
        }}
      />
    </div>
  );
};
export default Question;

Quick and dirty example of your code: https://codesandbox.io/s/awesome-cherry-syk9t?file=/src/question.js:42-1081