Как для каждого элемента массива сделать изменение счетчика отдельно при нажатии на кнопку в ReactJS?

Question

При нажатии кнопки + или - значения счетчика меняются одновременно. Как сделать, чтобы они менялись каждый отдельно?

Значения chiken rice baobab берутся из массива объектов

[
      {
        id: 'd75f762a-eadd-49be-8918-ed0daa8dd024',
        name: 'Chicken tikka masala',
        price: 12,
        ingredients: ['chicken', 'rice', 'baobab'],
      }
]

Код компонента Ingredient:

import React, { useState } from 'react';
import { Button } from '../Button/Button';

export const Ingredient = ({ ingredient }) => {
  console.log(ingredient);
  const [count, setCount] = useState(1);

  return (
    <div>
      <h3>Ingredients:</h3>
      <ul>
        {ingredient.ingredients.map((item) => (
          <li>
            <Button onClick={() => setCount(count - 1)}>-</Button>
            {count}
            <Button onClick={() => setCount(count + 1)}>+</Button>
            {item}
          </li>
        ))}
      </ul>
    </div>
  );
};

Answer 1

import React, { useState } from 'react';
import { Button } from '../Button/Button';

export const Ingredient = ({ ingredient }) => {
  const count, setCount = useState({chicken: 1, rice:1, baobab: 1});

  return (
    <div>
      <h3>Ingredients:</h3>
      <ul>
        {ingredient.ingredients.map((item) => (
          <li>
            <Button onClick={() => setCount({...count,[item]:count[item]--})}>-</Button>
            {count[item]}
            <Button onClick={() => setCount({...count,[item]:count[item]++})}>+</Button>
            {item}
          </li>
        ))}
      </ul>
    </div>
  );
};

Answer 2

Можно сделать так... Но при таком варианте материнский элемент не узнает значение счетчиков для его элементов.

const Button = ({onClick, children}) => {
  return (
    <button onClick={onClick}>{children}</button>
  );
}

const Item = ({item}) => {
    const [count, setCount] = React.useState(1);

    return (
      <li>
        <Button onClick={() => setCount(count - 1)}> - </Button>
        {count}
        <Button onClick={() => setCount(count + 1)}> + </Button>
        {item}
      </li>
    )
}

const Ingredient = ({ingredient}) => {
  return (
    <div>
      <h3> Ingredients: </h3>
      <ul>
        {ingredient.ingredients.map((item) => <Item key={item} item={item}/>)}
      </ul>
    </div>
  );
};
        
const App = props => {
  const o = {
    id: 'd75f762a-eadd-49be-8918-ed0daa8dd024',
    name: 'Chicken tikka masala',
    price: 12,
    ingredients: ['chicken', 'rice', 'baobab'],
  }
  
  return (
    <Ingredient ingredient = {o}/>
  )
}


const domContainer = document.querySelector('#root');
const root = ReactDOM.createRoot(domContainer); root.render( < App / > );

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

<div id='root'></div>

P.S. Форматирование кода в песочнице оставляет желать лучшего. :(

БЛОГ НА HUSL

Как для каждого элемента массива сделать изменение счетчика отдельно при нажатии на кнопку в ReactJS?

Ответы (2 шт):