Почему не работает условие в JSX?

Question

[nivaech]

Есть функция, которая в зависимости от условия рендерит определенный массив цветов, в зависимости от выбранной категории. Условия простое - если такой-то props === true, то функция должна сработать и отобразить необходимый set. Но не работает.
Вот функция:

displayColors = (colorSet) => {
 colorSet.map((color, index) => {
    return (
<li className={"filter-item " + (this.state.color === color ? "active-item" : null)} key={index}
onClick={() => this.handleFilter("color", color)}> {color} </li>
            )
          })
    }

Эта же функция вызывает функцию handleFilter, которая берет необходимые значение, изменяет состояние, и выводит на экран необходимую категорию.

handleFilter = (name, value) => {
    this.setState ({
        [name]: value
    }, this.sortData)
}

И вот так выглядит условие:

<ul className = {"filter-list colors-list " + (colorFilter ? "color-container-visible" : null)}>
    {(categoryOneColors ? displayColors(colorSet) : null )}
    {(categoryTwoColors ? displayColors(colorSet2) : null )}
    ...
    ...
</ul>

На выходе получается пустота, но если хардкодить условие в ручную, без функции - то все работает отлично. В чем проблема?

Answer 1

[ivanoffdan]

 Проблема в том, что displayColors не возвращает созданный массив. Надо так:

displayColors = (colorSet) => {
    return colorSet.map((color, index) => (
      <li
        className={`filter-item ${this.state.color === color ? 'active-item' : null}`}
        key={index}
        onClick={() => this.handleFilter('color', color)}
      > {color} </li>
    ));
  }

или так

displayColors = (colorSet) => colorSet.map((color, index) => (
    <li
      className={`filter-item ${this.state.color === color ? 'active-item' : null}`}
      key={index}
      onClick={() => this.handleFilter('color', color)}
    > {color} </li>
  ))

Comments

[nivaech]

Благодарю, работает