Блог

Я работаю над этим компонентом здесьhttps://codesandbox.io/s/optimistic-paper-zsy7u?file=/src/list.js это отображает элемент по категориям, но я, похоже, не могу понять, чего не хватает, чтобы действительно показывать продукты. Я уверен, что мне не хватает чего-то небольшого, но вторая пара глаз была бы оценена.

Вы забываете отправлять displayCategory реквизиты из Mains в UI компоненты:

 const Mains = ({ products, productCategories }) => {
  const [displayCategory, setDisplayCategory] = useState("all");
  const setCategory = (category) => {
    setDisplayCategory(category);
  };

  return (
    <UI
      setCategory={setCategory}
      productCategories={productCategories}
      products={products}
      // HERE
      displayCategory={displayCategory}
    />
  );
};
  

И от UI к ProductItems компоненту.

                                                      //HERE
const UI = ({ state, productCategories, setCategory, displayCategory, products }) => {
  return (
    <div className="box flex-row">
      <div className="box flex-col">
        <h3>Filter by Category</h3>
        {ButtonCategories(productCategories, setCategory)}
      </div>
      <div className="box flex-col">
        <h3>Results</h3>
                       // HERE
        <ProductItems displayCategory={displayCategory} state={state} products={products} />
      </div>
    </div>
  );
};