Отображение элементов на основе троичного оператора

Question

Я пытаюсь не отображать часть моего кода.Я хочу сделать это только тогда, когда ответ правильный / не правильный.В начале должны отображаться только вопросы и ответы.React выдает ложный аргумент «ты неправ».Состояние установлено в ноль.Я проверил и ноль не равно ни ложь, ни истина.Почему это что-то делает?Как не сделать ничего, пока пользователь не выберет неправильный / правильный ответ?Код:

export default class QuoteApp extends Component {
  constructor(props) {
    super(props)

    this.state = {
       index: 0,
       isCorrect: null
    }
  }

  confirmAnswer = () => {
      this.setState({
          index: this.state.index + 1
      })
  }

  handleClick = (e, index) => {
    if (e.target.textContent === data[index].name) {
      this.setState({
        isCorrect: true
      }) 
      } else {
        this.setState({
          isCorrect: false
        })
    }
  }

  render() {
      const { index, isCorrect } = this.state
      console.log(this.state)
    return (
      <div className="QuoteApp">
        <div className={ (this.state.isCorrect ? 'hide' : '') }>
          <Quote index={index}/>
          <Answers index={index}
                 handleClick={this.handleClick}
                 />
        </div>
        {isCorrect ?
        <h1>you're right</h1>
        :
        <h1>you're wrong</h1>}
        <button onClick={this.confirmAnswer}>Confirm</button>
      </div>
    )
  }
}

Я хочу

Вы правы: вы не правы, пока вас не уйдет пользователь

Answer 1

Вы можете написать так:

{ isCorrect !== null && 
  ( isCorrect ? <h1>you're right</h1> : <h1>you're wrong</h1> )
  || '' // To make sure we don't print boolean value in the UI
}

Условие && будет удовлетворять возвращаемому значению isCorrect. Если это null, то это не будет продолжаться. Мы заключаем их в круглые скобки, потому что мы хотели бы выполнить код внутри этого, только если isCorrect не null.

Answer 2

Использование оператора &&. Вы увидите, правы вы или нет только в случае взаимодействия с пользователем

{isCorrect !== null && isCorrect && 
        <h1>you're right</h1>}
{isCorrect !== null && !isCorrect && 
        <h1>you're wrong</h1>}

Сделайте что-то подобное ниже, чтобы скрыть Цитату / Ответ, когда пользователь выбирает ответ

Использование оператора &&

    {isCorrect === null && <div className={ (this.state.isCorrect ? 'hide' : '') }>
      <Quote index={index}/>
      <Answers index={index}
             handleClick={this.handleClick}
             />
    </div>}

ИЛИ троичный оператор

 {isCorrect === null ? <div className={ (this.state.isCorrect ? 'hide' : '') }>
      <Quote index={index}/>
      <Answers index={index}
             handleClick={this.handleClick}
             />
    </div> : null}