How I add new 'Show answer' button to display the correct answer to the question?

Question

How I add new 'Show answer' button to display the correct answer to the question? The answer isn't visible when the question is retrieved but is only displayed when the 'Show answer' button is pressed. I need to make only one fetch request / question and I can display the answer using conditional rendering, for example.

const Trivia = () => {
    const [question, setQuestion] = React.useState();

    const fetchQuestion = () => {
        fetch("https://opentdb.com/api.php?amount=1")
        .then((response) => response.json())
        .then((data) => {
            setQuestion(data.results[0].question);
        });
    };
        
    React.useEffect(() => {
        fetchQuestion();
    }, []);
         
    return(
        <div>
            <p>{question}</p>
            <button onClick={fetchQuestion}>New Question</button> 
        </div>
    );
};

Answer 1

<div id="root"></div>

<script type="text/babel">
        
    const Trivia = () => {
        const [question, setQuestion] = React.useState();
     const [showAnswer, setShowAnswer] = React.useState(false);

     const fetchQuestion = () => {
         fetch("https://opentdb.com/api.php?amount=1")
         .then((response) => response.json())
         .then((data) => {
              setQuestion(data.results[0].question);
             
         });
       };

 const answerToggler = () => setShowAnswer(prevAns => !prevAns)

    
    React.useEffect(() => {
             fetchQuestion();
         }, []);
     
     return(
     <div>
     <p> {question}</p>
     <button onClick={fetchQuestion}>New Question</button>
    {showAnswer && <h3>Correct Answer</h3>}
<button onClick={answerToggler}>Show Answer </button> 
    </div>
         
         );
     
 };

i hope this will work

Answer 2

You can store the answer along with the question and add a state to check if the answer is to be displayed. The answer will be shown when the user clicks Show answer and will be hidden when a new question is loaded.

  const Trivia = () => {
  const [question, setQuestion] = React.useState(null);
  const [showAnswer, setShowAnswer] = React.useState(false);

  const fetchQuestion = () => {
    fetch("https://opentdb.com/api.php?amount=1")
      .then((response) => response.json())
      .then((data) => {
        console.log(data);
        setShowAnswer(false);
        setQuestion({
          question: data.results[0].question,
          answer: data.results[0].correct_answer
        });
      });
  };

  React.useEffect(() => {
    fetchQuestion();
  }, []);

  return (
    <div>
      {question && (
        <>
          <p> {question.question}</p>
          {showAnswer && <p>{question.answer}</p>}
          <button onClick={fetchQuestion}>New Question</button>
          <button onClick={() => setShowAnswer(true)}>Show Answer</button>
        </>
      )}
    </div>
  );
};

View on codesandbox