如何在 React js 中更改旧状态

Question

I have a list of Faq components. When I click on a question, the answer for that particular question needs to be shown, and all other answers need to be hidden.
My problem is, I have a bunch of questions, and when I click on a question, it's showing the answer for the clicked question, but it's not hiding other answers which which were already opened.

import React, { useState, useEffect } from 'react';

function Faq(props) {
   const [toggle, setToggle] = useState(false);
   return (
      <div>
        <h2 onClick={() => setToggle(true)}>
        <strong>{props.question}</strong></h2>
        {toggle && <p>{props.answer}</p>}   
     </div>
   )

 }

 function Faqs(props) { 
      return (
           <div>
             <Faq question={"Question 1"} answer={"answer 1"} />
             <Faq question={"Question 2"} answer={"answer 2"} />
           </div >
      )
 }

Answer 1

First of all, your setToggle function only sets toggle value to be true . Secondly, by clicking on a particular FAQ component will not trigger the onClick event in rest of the FAQ components.

Best solution is keeping a state variable to store which question is open at the moment in parent component and then a function to be invoked commonly for all FAQ component.

import React, { useState, useEffect } from 'react';

function Faq(props) {
   return (
      <div>
        <h2 onClick={() => props.onClick(prop.toggle === props.question ? '' : prop.question)}>
        <strong>{props.question}</strong></h2>
        {(props.toggle === props.question) && <p>{props.answer}</p>}   
     </div>
   )

 }

 function Faqs(props) {
      const [toggle, setToggle] = useState('');
      return (
           <div>
             <Faq
               question={"Question 1"}
               answer={"answer 1"}
               onClick={setToggle}
               toggle={toggle}
             />
             <Faq
               question={"Question 2"}
               answer={"answer 2"}
               onClick={setToggle}
               toggle={toggle}
             />

           </div >
      )
 }

Answer 2

Here's one of the many solutions to your problem:

import React, { useState } from 'react';

function Faq(props) {
   return (
      <div>
        <h2 onClick={() => { props.clickHandler(props.qid) }}>
        <strong>{props.question}</strong></h2>
        { props.toggle === props.qid && <p>{props.answer}</p> }   
     </div>
   )
 }

 function Faqs() { 
   const [toggle, setToggle] = React.useState("0");

   handleClick = qid => {
     setToggle(qid);
   }

      return (
           <div>
             <Faq qid="1" question={"Question 1"} answer={"answer 1"} clickHandler={handleClick} toggle={toggle} />
             <Faq qid="2" question={"Question 2"} answer={"answer 2"} clickHandler={handleClick} toggle={toggle} />
           </div>
      )
 }

Instead of switching toggle true and false , assign an initial value of "0" . Assign each question a qid and pass it along with the props . The currently visible answer's question qid will be set in the state and answer's visibility will depend upon the current value of state matching the clicked question's qid .

You can also choose to hide the question's already displayed answer if it is re-clicked by checking if the clicked question's qid is the same as what is currently in the state and setting the toggle back to "0" (the initial state).

Feel free to change the variable name toggle to something like currentQuestion or anything that makes sense, because now we're storing the question qid , instead of true or false .

I know this can be optimised further but will serve as a good "working" starting point. Obviously, you won't need to repeat passing all those props in <Faq /> because I think ultimately you'll use Array .map() for this.

Hope you understand this, else I will elaborate more on this.

Answer 3

This is how you can work with multiple lists in optimized way. if you have many list just iterate through map instead of writing hard coding.

let data = [{qid:1,question: "Question 1", answer:"Answer 1"},
{qid:2,question: "Question 2", answer:"Answer 2"},
{qid:3,question: "Question 3", answer:"Answer 3"},
{qid:4,question: "Question 4", answer:"Answer 4"},
{qid:5,question: "Question 5", answer:"Answer 5"}]
function Faq(props) {
   return (
      <div>
        <h2 style={{background:'lightgrey'}} onClick={() => { props.clickHandler(props.qid) }}>
        <strong>{props.question}</strong></h2>
        { props.toggle === props.qid && <p>{props.answer}</p> }   
     </div>
   )
 }

 function Faqs() { 
   const [toggle, setToggle] = React.useState("0");

   const handleClick = qid => {
     console.log(qid)
     setToggle(qid);
   }

      return (
           <div>
             {data.map(({answer,question,qid})=>
              <Faq qid={qid} question={question} 
               clickHandler={handleClick} 
               toggle={toggle} 
               answer={answer} />
              )}
           </div>
      )
 }

Live demo