Как вернуть отфильтрованный компонент из функции

Question

Мне нужно отфильтровать значения на основе раскрывающегося списка. Итак, в основном у меня есть 10 карточек, которые показывают разные состояния: красный, желтый, синий. У меня есть раскрывающийся список, который должен помочь мне отфильтровать эти карточки по цвету. Скажем, если я выберу желтый в dropdwon, то все 4 карты красного цвета должны появиться на моем экране. Я начал писать код, но застрял между ними. Было бы здорово, если бы кто-нибудь мог мне с этим помочь.

class Drop extends Component<{}, IState> {
  state = {
    product: [],
  };
  sortOptions = [
    { value: "Red", label: "Red" },
    { value: "Yellow", label: "Yellow" },
    { value: "Blue", label: "Blue" },
  ];
  onChange = (event) => {
    console.log(event.value);
    let filtered = this.sortOptions.filter(
      (card) => card.value === event.value
    );
    console.log(filtered); // It is returning value wahtever is selected in dropdown
  };

  render() {
    return (
      <>
        <Dropdown
          items={this.sortOptions}
          onChange={this.OnChange}
          name="sorting"
          label="All"
          type="default"
        />

        <div>
          {this.state.product.map((product) => (
            <Card product={product}></Card>
          ))}
        </div>
      </>
    );
  }
}

Внутри моего компонента карты:

<Card>
  <div> Content </div>
  {this.state.color} // this color will varies
</Card>

Метод OnChange возвращает выбранное значение из раскрывающегося списка, но я хочу отфильтровать эти карточки по раскрывающемуся значению

Answer 1

У вас просто фильтрация не в том месте.

Сначала вам нужно отслеживать выбранный цвет в состоянии:

state = { products: [], color: 'Red' }

Теперь позвольте обработчику изменений обновить это состояние :

onChange = event => {
    this.setState({ color: event.value })
}

Теперь вы можете фильтровать на основе того, что выбрано в render(), примерно так:

    <div>
      {this.state.products
        .filter(product => product.color == this.state.color)
        .map(product => <Card product={product} />)}
    </div>