title: React hooks disable button if item already exists in the array
body: <p>I have a Cart component where I save products in an array.</p>
  <p>I have also multiples buttons with differents id's that I would
  to disable independently, depending of each id when I add the product
  to the array.</p>
  <p>once I remove the item from the array I would like to turn back the button
  to able again.</p>
  <p>I tried a couple of solutions but they would or disable all my buttons or
  once I could disable the add to cart I couldn't turn the button to able again
  on delete. please guys I've run out of ideas!</p>
  <pre><code>// array to save elements in the cart
  const [cart, setCart] = useState([])
  
  return (
    &lt;&gt;
  // array with all buttons
      {list.map((item) =&gt; {
        // function to add elements to the cart
        const addToCart = () =&gt; {
          const palestra = {
            horario_inicio: item.horario_inicio,
            horario_fim: item.horario_fim,
            id_programacao: item.programacao,
            nome_da_palestra: item.nome_da_palestra,
            palestrante: item.palestrante,
            imagem: item.imagem_palestra.url,
            id: item.id
          }
          setCart(curr =&gt; [...curr, palestra])
        }
        // function to delete items fro cart
        const handleRemoveItem = (itemId: string) =&gt; {
          setCart(cart.filter(({ id }) =&gt; id !== itemId));
        }
  
        return (
          &lt;Box m=&quot;2&quot; h=&quot;30%&quot; pt={2} pb={2} border=&quot;1px solid #1C1C1C&quot; backgroundSize=&quot;cover&quot; borderRadius=&quot;20px&quot; backgroundPosition=&quot;center&quot; backgroundImage={`url(${(item.imagem_palestra?.url)})`} backgroundColor=&quot;white&quot; align=&quot;center&quot;&gt;
            &lt;Center ml=&quot;5&quot; mt=&quot;2&quot;&gt;
              &lt;Spacer /&gt;
              &lt;&gt;
        // I want to disable this button if his id exists in the array of
                // cart and anable in case I case i delete this item;
                &lt;IconButton
                  variant=&quot;ghost&quot;
                  mr=&quot;3&quot;
                  colorScheme=&quot;gray&quot;
                  borderRadius='md'
                  aria-label=&quot;Save event&quot;
                  icon={&lt;Icon as={BsBookmark} /&gt;}
                  onClick={addToCart}
                /&gt;
                &lt;IconButton
                  variant=&quot;ghost&quot;
                  mr=&quot;3&quot;
                  colorScheme=&quot;gray&quot;
                  borderRadius='md'
                  aria-label=&quot;Save event&quot;
                  icon={&lt;Icon as={BsFillBookmarkFill} /&gt;}
                  onClick={() =&gt; handleRemoveItem(item.id)}
                /&gt;
              &lt;/&gt;
            &lt;/Center&gt;
          &lt;/Box&gt;
        )
      })}
    &lt;/&gt;
                   
  </code></pre>
  <p>again I'm trying to disable only the button witch id matches with the id of the
  product in the cart array.</p>
  <p>Thank you in advance guys :)</p>