Как вывести компонент React несколько раз учитывая количество count в объекте?

Question

[nopescript]

Подскажите пожалуйста, как можно вывести несколько компонентов ингредиента учитывая их количество в стэйте?
При нажатии на изображение ингредиента, у него количество увеличивается, а при нажатии на кнопку "X" уменьшается.

const App = () => {
  const [ingredients, setIngredients] = useState([
    {name: 'Meat', count: 0, id: nanoid()},
    {name: 'Cheese', count: 0, id: nanoid()},
    {name: 'Salad', count: 0, id: nanoid()},
    {name: 'Beacon', count: 0, id: nanoid()},
  ]);

  const increaseIngredients = (id: string) => {
    setIngredients((prevState) =>
      prevState.map((ingredient) =>
        ingredient.id === id
          ? {...ingredient, count: ingredient.count + 1}
          : ingredient
      )
    );
  };

  const deleteIngredients = (id: string) => {
    setIngredients((prevState) =>
      prevState.map((ingredient) =>
        ingredient.id === id && ingredient.count > 0
          ? {...ingredient, count: ingredient.count - 1}
          : ingredient
      )
    );
  };

  const ingredientList = ingredients.map((ingredient) => {
    return (
      <Ingredient key={ingredient.id} img={`./${ingredient.name}.png`} name={ingredient.name} count={ingredient.count}
                  increaseIngredient={() => increaseIngredients(ingredient.id)}
                  deleteIngredient={() => deleteIngredients(ingredient.id)}/>
    );
  });

  const burgerList = ingredients.map((ingredient => {
    if (ingredient.name === 'Meat') return <Meat/>;
    if (ingredient.name === 'Cheese') return <Cheese/>;
    if (ingredient.name === 'Salad') return <Salad/>;
    if (ingredient.name === 'Beacon') return <Beacon/>;
  }));

  return (
    <>
      <Container name={'Ingredients'}>
        {ingredientList}
      </Container>

      <Container name={'Burger'}>
        <Burger>
          {burgerList}
        </Burger>
      </Container>
    </>
  );
};

export default App;

Answer 1

[Алексей Уколов]

return new Array(ingredient.count).fill(null).map((_, index) => <Meat key={index} />);

Создаём массив нужной длины, заполням его чем угодно (это обязательно, иначе работать не будет) и итерируем по нему как обычно в Реакте.
Как правило индекс массива лучше не использовать в качестве ключа, но поскольку здесь компоненты взаимозаменяемые (раз не принимают пропсы), то от индекса вреда не будет.

Comments

[nopescript]

Спасибо большое

[WbICHA]

Создаём массив нужной длины, заполням его чем угодно (это обязательно, иначе работать не будет) и итерируем по нему

И всё это можно сделать сразу.)

return Array.from({ length: ingredient.count }, (_, i) => <Meat key={index} />);