Как отфильтровать объект массива на основе свойства внутри него?

Question

Попытка условно отобразить значения из объекта массива, если isDayTime равно true.

Пробовал .filter и .map, но я не думаю, что делаю это правильно.

    const weather = this.props.weather.weatherData;
    return weather.map(weather => {
      if (weather.isDayTime === true) {
        return (
          <div className="ui segment">
            <div className="ui center grey aligned header">TheDay</div>
            <div className="ui center grey aligned header">
              <i className="sun icon" />
            </div>
            <div className="ui center grey aligned sub header">
              Min:75° Max:80°
            </div>
          </div>
        );
      }
    });
  }
}

Answer 1

Что вы можете сделать, это

1 - сначала отфильтруйте данные и отобразите отфильтрованные данные в вашем рендере.

const weather = this.props.weather.weatherData;
const weatherFiltered = weather.filter( ({ isDayTime }) => isDayTime );

return weather.map(weather => {
    return (
      <div className="ui segment">
        <div className="ui center grey aligned header">TheDay</div>
        <div className="ui center grey aligned header">
          <i className="sun icon" />
        </div>
        <div className="ui center grey aligned sub header">
          Min:75° Max:80°
        </div>
      </div>
    );
});

2 - Карта в вашем рендере и возвращает ноль, если вы не хотите, чтобы элемент отображался.

return weather.map(weather => {
  if (weather.isDayTime === true) {
    return (
      <div className="ui segment">
        <div className="ui center grey aligned header">TheDay</div>
        <div className="ui center grey aligned header">
          <i className="sun icon" />
        </div>
        <div className="ui center grey aligned sub header">
          Min:75° Max:80°
        </div>
      </div>
    );
    return null
  }
});

Answer 2

использовать фильтр на weatherData и возвращать элементы, соответствующие условию.

const weatherData = this.props.weather && this.props.weather.weatherData || [];
const weather = weatherData.filter(weather => weather.isDayTime === true);

return weather.map(weatherItem => {

    return (
      <div className="ui segment">
        <div className="ui center grey aligned header">TheDay</div>
        <div className="ui center grey aligned header">
          <i className="sun icon" />
        </div>
        <div className="ui center grey aligned sub header">
          Min:75° Max:80°
        </div>
      </div>
      );
    }
  });
}