Conditional rendering JSX - reactjs

Question

I have some lines of JSX that I want to show/hide when I click on a button.
I have initialized the state as such :
const [shown, setShown] = useState(true);
And this is the JSX :
<div className="question--section">
<div className="question--count">
<span>Question {props.class[currentQuestion].id} </span>
<h1>{props.class[currentQuestion].questionText}</h1>
</div>
</div>
I have tried to to do this :
{shown ? (
<div className="question--section">
<div className="question--count">
<span>Question {props.class[currentQuestion].id} </span>
<h1>{props.class[currentQuestion].questionText}</h1>
</div>
</div>) :
(<div>Empty</div>)}
It doesn't work. How should I approach this? ( Switching the state should hide/show the JSX)
The whole component :
import React from "react";
import { useState } from "react";
const Quiz = (props) => {
const [currentQuestion, setCurrentQuestion] = useState(0);
const [shown, setShown] = useState(true);
const handleAnswerButtonClick = () => {
if (currentQuestion + 1 < props.class.length) {
setCurrentQuestion((prevQuestion) => prevQuestion + 1);
} else {
alert("End of the quiz!");
}
};
return (
<div className="container quiz--container">
<button>Κεφάλαιο 1</button>
{shown ? (
<div>
<h1>Κεφάλαιο {props.id}</h1>
<div className="question--section">
<div className="question--count">
<span>Question {props.class[currentQuestion].id} </span>
<h1>{props.class[currentQuestion].questionText}</h1>
</div>
</div>
<div className="answer-section">
{props.class[currentQuestion].answers.map((answer) => (
<button onClick={handleAnswerButtonClick}>{answer.answerText}</button>
))}
</div>) :
(<div>Empty</div>)}
</div>
);
};
export default Quiz;

Answer 1

You are missing a closing </div> before the :.
It should be this:
<div className="container quiz--container">
<button>Κεφάλαιο 1</button>
{shown ? (
<div>
<h1>Κεφάλαιο {props.id}</h1>
<div className="question--section">
<div className="question--count">
<span>Question {props.class[currentQuestion].id} </span>
<h1>{props.class[currentQuestion].questionText}</h1>
</div>
</div>
<div className="answer-section">
{props.class[currentQuestion].answers.map((answer) => (
<button onClick={handleAnswerButtonClick}>{answer.answerText}</button>
))}
</div>
</div>) :
(<div>Empty</div>)}
</div>

Answer 2

Inside handleAnswerButtonClick callback, setShown to false or reverse it.
const handleAnswerButtonClick = () => {
setShown(false)
// or
setShown(!shown)
...
}