ReactJS как в return написать js + reactjs код?

Question

При рендере мне нужно сделать проверку. Попробовал так

render() {
    return (
      <table border="1" width="500px">
        <tr>
          <td>Название</td>
          <td>Категория</td>
          <td>Цена (шт.)</td>
          <td>
            Кол-во <button onClick={this.sortProducts}>сортировка</button>
          </td>
        </tr>
{
if (state.filters.isFruitChecked) {
  state.products.filter(e => e.category == "fruit")
  .map(product => (
    <tr>
      <td>{product.name}</td>
      <td>{product.category}</td>
      <td>{product.price}</td>
      <td>{product.amount}</td>
    </tr>
  ))
}
}
</table>
    );
  }

Он мне выводит что if это синтаксическая ошибка. Подскажите как мне написать проверку правильно?

Answer 1

render() {
    return (
      <table border="1" width="500px">
        <tr>
          <td>Название</td>
          <td>Категория</td>
          <td>Цена (шт.)</td>
          <td>
            Кол-во <button onClick={this.sortProducts}>сортировка</button>
          </td>
        </tr>
        {
          state.filters.isFruitChecked &&     //  через конъюнкцию (&&)
          state.products.
            filter(e => e.category == "fruit").
            map(product => (
              <tr>
                <td>{product.name}</td>
                <td>{product.category}</td>
                <td>{product.price}</td>
                <td>{product.amount}</td>
              </tr>
            ))
          }
        }
      </table>
   );
}

БЛОГ НА HUSL

ReactJS как в return написать js + reactjs код?

Ответы (1 шт):