title: How to update state by child's index on child list
body: <p>I have a simple list of items like this:</p>
  <pre><code>const nodeList = Array.from({length:10}, (_,i) =&gt; i + 1)
  const Counter = () =&gt; {
      
      const [count, setCount] = React.useState(0)  
      return (
        &lt;div&gt;
         {nodeList.map((node,i) =&gt; (
            &lt;div key={i}&gt;
              &lt;button 
                onClick={() =&gt; {
                  setCount(prev =&gt; prev + 1)
                }}
              &gt;
                Sum up
              &lt;/button&gt;
              &lt;span&gt;{count}&lt;/span&gt;
            &lt;/div&gt;
          ))}
          
        &lt;/div&gt;
      )
    }
  </code></pre>
  <p>but when I click on sum up the count value is the same for all elements, how can I get the value of the count independent for each child in the list, using the child's key or index?</p>
  <p>I was wondering trying another approach, instead of using a single number, I was thinking to use an Object and create the state depending on the clicked item, something like this:</p>
  <pre><code>const [count, setCount] = useState({});
  
    const handleClick = (i) =&gt; {
      setCount({ ...count, [i]: 1 });
    };
    return (
      &lt;div className=&quot;App&quot;&gt;
        {nodeList.map((node, i) =&gt; (
          &lt;div key={i}&gt;
            &lt;button
              onClick={() =&gt; {
                handleClick(i);
              }}
            &gt;
              Sum up
            &lt;/button&gt;
            &lt;span&gt;{count[i]}&lt;/span&gt;
          &lt;/div&gt;
        ))}
      &lt;/div&gt;
    );
  </code></pre>
  <p>Now, How could I get the counter on each element increased?</p>