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.
<div id="root"></div>
<script type="text/babel">
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>
);
};
ReactDOM.render(, document.getElementById("root"));
</script>
CodePudding user response：
<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
CodePudding user response：
You can add a state for storing the answer and one 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.
import React from "react";
export default function Trivia() {
const [question, setQuestion] = React.useState(null);
const [answer, setAnswer] = 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(data.results[0].question);
setAnswer(data.results[0].correct_answer);
});
};
React.useEffect(() => {
fetchQuestion();
}, []);
const displayAnswer = () => setShowAnswer((prevAns) => !prevAns);
return (
<div>
<p> {question}</p>
{showAnswer && <p>{answer}</p>}
<button onClick={fetchQuestion}>New Question</button>
<button onClick={displayAnswer}>Show Answer</button>
</div>
);
}