Как передать handleIncrement/handleDecrement в функцию другого файла через props?

Question

[doooktooor]

У меня есть 2 файла, первый

const handleIncrement = (value) => {
    let countersIncrement = counters.map((i) => {
      return (i.value = value + 1);
    });
    setCounters(countersIncrement);
  };

  const handleDencrement = (value) => {
    let countersDencrement = counters.map((d) => {
      return (d.value = value - 1);
    });
    setCounters(countersDencrement);
  };
  return (
    <>
      {counters.map((count) => {
        return (
          <Counter
            key={count.id}
            onDelete={handleDelete}
            onIncrement={handleIncrement}
            onDecrement={handleDencrement}
            {...count}
          />

Второй

const handleIncrement = () => {
    props.onIncrement(props.value);
    // setValue((prevState) => prevState + 1);
  };

  const handleDencrement = () => {
    props.onDencrement(props.value);
    // setValue((prevState) => prevState - 1);
  };

  return (
    <div>
      <span>{props.name}</span>
      <span className={getBageClasses()}>{formatValue()}</span>
      <button
        className="btn btn-primary btn-sm m-2"
        onClick={() => props.onIncrement(props.value)}
      >
        +
      </button>
      <button
        className="btn btn-primary btn-sm m-2"
        onClick={() => props.onDencrement(props.value)}
      >
        -
      </button>

Вот их части, не понимаю как передать через props чтобы по нажатию одной увеличивалось, а по нажатию второй уменьшалось значение из массива с объектами только у поля value

[
    { id: 0, value: 0, name: "Ненужная вещь" },
    { id: 1, value: 4, name: "Ложка" },
    { id: 2, value: 0, name: "Вилка" },
    { id: 3, value: 0, name: "Тарелка" },
    { id: 4, value: 0, name: "Набор минималиста" },
  ];

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

Answer 1

[Andrey]

В родительском описать обработку кликнутого элемента.

const handleIncrement = id => {
        const elementIndex = counters.findIndex(counter => counter.id === id);
        const newCounter = [...counters];
        newCounter[elementIndex].value++;
        setCounters(newCounter);
    };

В дочернем идёт деструктуризация props. const {value} = props; Можно указать id.

const handleIncrement = () => {
        props.onIncrement(props.id);
    };