Как обработать клик по каждому Counter-у в каждом дочернем компоненте?

Question

[Михаил Р.]

Необходимо создать counter и слушать его изменение в каждом отдельном дочернем компоненте (counter - это пример https://reactjsexample.com/react-counter/).

Готовый counter не интересует, т.к. хочется понять именно алгоритм решения текущей задачи...

Для наглядности, набросал простой пример:

function Parent() {
  function dec() { console.log("decrement"); }
  function inc() { console.log("increment"); }
  
  return(
    <div className="childs">
      {[1, 2, 3].map((data, i) => {
        return <Child key={i} dec={dec} inc={inc} />
      })}
    </div>
  );
}

function Child(props) {
  return(
    <div className="child">
      <div className="child__decrement">-</div>
      <input type="number" className="child__input" defaultValue="0"/>
      <div className="child__increment">+</div>
    </div>
  );
}

При клике на .child__decrement необходимо увеличить значение .child__input, и уменьшить при клике на .child__increment. Обратите внимание, что таких дочерних компонентов будет несколько.

Как грамотно решить подобную задачу?

Answer 1

[0xD34F]

Храните значения count отдельно в каждом экземпляре Child.

Или все вместе в Parent, и передавайте их в Child вместе с функцией, которая будет устанавливать новое значение.