How do I only call the onClick() function to a single React component?

Question

There is a function called Question that takes a list of objects (questionList) and changes each object into a React component that shows a question and when clicked should reveal the answer in a FAQ style. There is another function called Answer which shows the answer when a Question container is clicked. However, instead of showing the answer of just the container which was clicked, it shows every answer of all the questions - as if rendered all the questions again with their answers. When a container is clicked again, all Answer containers are hidden.

How do I only show the answer of the specific Question container?

Example:

How does this work?
What do you do?

click on 2

How does this work?
- Answer to 1
What do you do?
- Answer to 2

Instead of:

How does this work?
What do you do?
- Answer to 2

function Question(props) {
    const [show, setShow] = useState(false);
    const onClick = () => {
        if (show) {
            setShow(false);
        } else {
            setShow(true);
        }
    };

    const questionList = props.questionList;
    const questions = questionList.map(question => (
        <div onClick={onClick} className="container">
            <div className="line"></div>
            <div className="question-container">
                <h3 className="question">{question.question}</h3>
                <div className="drop-icon">
                    <i className="fa-solid fa-caret-down"></i>
                </div>
            </div>

            {show ? <Answer question={question} /> : null}
        </div>
    ));
    return <section>{questions}</section>;
}

function Answer(props) {
    const question = props.question;
    const answer = (
        <div className="answer">
            <p>{question.answer}</p>
        </div>
    );
    return answer;
}

John Li · Accepted Answer · 2023-01-20 19:16:08Z

1

It seems that the state show is just one value while each item should probably have their own show for the desired result.

Try make show an object (or array) that stores a boolean value for each item in the list:

function Question({ questionList }) {
  const [show, setShow] = useState({});
  const onClick = (index) =>
    setShow((prev) => ({ ...prev, [index]: !Boolean(prev[index]) }));

  const questions = questionList.map((question, index) => (
    <div key={index} onClick={() => onClick(index)} className="container">
      <div className="line"></div>
      <div className="question-container">
        <h3 className="question">{question.question}</h3>
        <div className="drop-icon">
          <i className="fa-solid fa-caret-down"></i>
        </div>
      </div>

      {show[index] ? <Answer question={question} /> : null}
    </div>
  ));
  return <section>{questions}</section>;
}

Or consider to make each question a component QuestionItem (like Answer in the example) that has its own show state:

const QuestionItem = ({ question }) => {
  const [show, setShow] = useState(false);
  const onClick = () => setShow((prev) => !prev);
  return (
    <div onClick={onClick} className="container">
      <div className="line"></div>
      <div className="question-container">
        <h3 className="question">{question.question}</h3>
        <div className="drop-icon">
          <i className="fa-solid fa-caret-down"></i>
        </div>
      </div>
      {show ? <Answer question={question} /> : null}
    </div>
  );
};

And iterate the component QuestionItem in Question:

function Question({ questionList }) {
  const questions = questionList.map((question, index) => (
    <QuestionItem key={index} question={question} />
  ));
  return <section>{questions}</section>;
}

edited Jan 20, 2023 at 19:16

answered Jan 20, 2023 at 19:11

John Li

7,4973 gold badges7 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

tices Over a year ago

Could you explain how this line works: setShow((prev) => ({ ...prev, [index]: !Boolean(prev[index]) }));? I don't understand the ...prev, [index] part especially.

Tomáš Hübelbauer Over a year ago

@tices Take a look at developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… and open a new question if you have a specific thing in mind.

John Li Over a year ago

@tices This line pass a setter function for setShow, which gets prev with the previous value as an argument. The return {...prev, [index]: !Boolean(prev[index])} updates the object with existing values, only changing the related key from true to false, or from undefined or false to true. Check updating-objects-in-state from React docs for a complete guide of this topic.

tices Over a year ago

It does make a lot more sense now though thanks to the documentation.

John Li Over a year ago

@tices The return is a new object (to avoid mutating the state), and {...prev} makes a copy of prev before updating the key [index], so in result you get a new object like the previous one, just had this key updated.

|

Collectives™ on Stack Overflow

How do I only call the onClick() function to a single React component?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related