Блог

Извините, если я спрашиваю не так. Я все еще новичок.

У меня есть список, который отображает некоторые продукты. Эти продукты разделены на категории, некоторые продукты могут иметь более одной категории.

На изображении ниже показаны категории каждого продукта:

Что я хотел бы сделать, это создать список со всеми категориями (без дублирования) и показать его пользователю.

 import React, { useState } from "react";
import "./styles.css";
import data from "./data";
import Categories from "./components/Categories";

export default function App() {
  const [products, setProducts] = useState(data);

  return (
    <div className="App">
      <h1>List Categories</h1>
      {products.map((item) => (
        <Categories key={item.id} item={item} />
      ))}
    </div>
  );
}  

Я помещаю свой код в codesandbox

Можете ли вы сказать мне, как я могу это сделать?

Заранее благодарю

 const allCategories = data.reduce((p,c)=> [...p, ...c.categories],[])
   .filter((elem, index, self) => index === self.indexOf(elem))
  

Вы могли бы использовать Set это, чтобы удалить все дубликаты в вашем списке

     const allCat = [...new Set(data.flat())]
  

вы можете прочитать больше в документах здесь