Условный рендеринг в React на основе состояния

Question

Я отправляю запрос API и отображаю его результат в пользовательском интерфейсе.

Теперь, для обработки ошибок, я хотел, чтобы при возникновении ошибки div, содержащий сообщение об ошибке, отображался вв пользовательский интерфейс.

Для этого я написал следующее троичное условие:

const showError = this.state.error
? `<div className="error-container">
    Error:
      <p>{this.state.error}</p>
   </div>`
: '';

И затем использовал это в моем методе рендеринга: {showError}

Но React см.результат в виде строки и отображает в пользовательском интерфейсе следующее:

Что я делаю не так?

Answer 1

Проблема в том, что вы сделали showError строку, поместив содержимое в `` (обратные метки), и оно больше не остается выражением JSX

Вместо этого используйте ().Также, если вы не хотите ничего возвращать, вы должны вернуть null вместо пустой строки

const showError = this.state.error
? (<div className="error-container">
    Error:
      <p>{this.state.error}</p>
   </div>)
: '';

Answer 2

В вас render метод вы можете сделать следующее:

render() {
  return(
   // ... other components
   {this.state.error && (
     <div className="error-container">
       Error:
       <p>{this.state.error}</p>
     </div>
    )}
    // ... 
  )
}