Use Event Handlers

Toggle Function

To show or hide the answer, we will add a toggle function to the component FaqItem.jsx.

Exercise

Write the toggle handler which will toggle the isAnswer state variable and set the new state using the setAnswer function:

Solution

  const toggle = () => {
    setAnswer(!isAnswer);
  };

Click Handler

To call the newly created toggle function, we will add an onClick handler to the question:

  return (
    <li className="faq-item">
      <h2 className="question" onClick={toggle}>
        {props.question}
      </h2>
      {isAnswer && <p>{props.answer}</p>}
    </li>
  );

Differences

FaqItem.jsx

--- a/src/components/FaqItem.jsx
+++ b/src/components/FaqItem.jsx
@@ -4,9 +4,16 @@ import PropTypes from "prop-types";

 const FaqItem = (props) => {
   const [isAnswer, setAnswer] = useState(false);
+
+  const toggle = () => {
+    setAnswer(!isAnswer);
+  };
+
   return (
     <li className="faq-item">
-      <h2 className="question">{props.question}</h2>
+      <h2 className="question" onClick={toggle}>
+        {props.question}
+      </h2>
       {isAnswer && <p>{props.answer}</p>}
     </li>
   );

import { useState } from "react";
import "./FaqItem.css";
import PropTypes from "prop-types";

const FaqItem = (props) => {
  const [isAnswer, setAnswer] = useState(false);

  const toggle = () => {
    setAnswer(!isAnswer);
  };

  return (
    <li className="faq-item">
      <h2 className="question" onClick={toggle}>
        {props.question}
      </h2>
      {isAnswer && <p>{props.answer}</p>}
    </li>
  );
};

FaqItem.propTypes = {
  question: PropTypes.string.isRequired,
  answer: PropTypes.string.isRequired,
};

export default FaqItem;