Conditional rendering JSX-CodePudding

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;

CodePudding user response：

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>

CodePudding user response：

Inside handleAnswerButtonClick callback, setShown to false or reverse it.

const handleAnswerButtonClick = () => {
  setShown(false)
  // or
  setShown(!shown)
  ...    
}