如果项目已存在于数组中，则 React 挂钩禁用按钮

Question

I have a Cart component where I save products in an array.

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.

once I remove the item from the array I would like to turn back the button to able again.

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!

// array to save elements in the cart
const [cart, setCart] = useState([])

return (
  <>
// array with all buttons
    {list.map((item) => {
      // function to add elements to the cart
      const addToCart = () => {
        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 => [...curr, palestra])
      }
      // function to delete items fro cart
      const handleRemoveItem = (itemId: string) => {
        setCart(cart.filter(({ id }) => id !== itemId));
      }

      return (
        <Box m="2" h="30%" pt={2} pb={2} border="1px solid #1C1C1C" backgroundSize="cover" borderRadius="20px" backgroundPosition="center" backgroundImage={`url(${(item.imagem_palestra?.url)})`} backgroundColor="white" align="center">
          <Center ml="5" mt="2">
            <Spacer />
            <>
      // 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;
              <IconButton
                variant="ghost"
                mr="3"
                colorScheme="gray"
                borderRadius='md'
                aria-label="Save event"
                icon={<Icon as={BsBookmark} />}
                onClick={addToCart}
              />
              <IconButton
                variant="ghost"
                mr="3"
                colorScheme="gray"
                borderRadius='md'
                aria-label="Save event"
                icon={<Icon as={BsFillBookmarkFill} />}
                onClick={() => handleRemoveItem(item.id)}
              />
            </>
          </Center>
        </Box>
      )
    })}
  </>
                 

again I'm trying to disable only the button witch id matches with the id of the product in the cart array.

Thank you in advance guys :)

Answer 1

How about using Array.prototype.some ?

<IconButton
  ...
  disabled={cart.some(cartItem => cartItem.id === item.id)}
/>