title: Multiple Counters how to isolate the state for which one - React Hooks
body: <p>I create a counter component and with this one, I have a return that returns every card that I have on the application, but when I try to increase or decrease the value inside the card they all are updating the counter, what it is the best approach to handle with this?
  the function of increase and decrease</p>
  <pre><code>const handleIncrease = (id) =&gt; {
          setActive(id);
          setLocalQuantity({ ...card, quantity: localQuantity + 1 });
      };
      const handleDecrease = (id) =&gt; {
          setActive(id);
          setLocalQuantity({ ...card, quantity: localQuantity - 1 });
      };
  </code></pre>
  <p>this is the button inside the map return of the cards:</p>
  <pre><code>  {activeCards.map((card, i) =&gt; {
  
                              return (
                                  &lt;Card key={i}&gt;
                                      &lt;CardDetails&gt;
                                          &lt;CardName&gt;
                                              {card.title}
                                          &lt;/CardName&gt;
                                          &lt;CardDescription&gt;
                                         {card.description}
                                          &lt;/CardDescription&gt;
                                      &lt;/CardDetails&gt;
                                      &lt;ButtonQuantityContainer&gt;
                                          &lt;QuantityButton
                                              key={i}
                                              id={i}
                                              onChange={() =&gt; onChange()}
                                              increaseQuantity={() =&gt; handleIncrease(i)}
                                              decreaseQuantity={() =&gt; handleDecrease(i)}
                                              quantity={selected}
                                          /&gt;
                                      &lt;/ButtonQuantityContainer&gt;
                                  &lt;/Card&gt;
                              );
                          })}
  </code></pre>