DEV Community

loading...

Discussion on: React Hooks: UseEffect, UseCallback, UseMemo

Collapse
jacobmparis profile image
Jacob Paris Author

Not really. You could do that:

const removeFromCart = (id) => dispatch(removeItem(id));

return (
    <Button onClick={() => removeFromCart(product.id)}>Delete</Button>
);

but then we might as well go all the way

return (
    <Button onClick={() => dispatch(removeItem(product.id))}>Delete</Button>
);

And then it's apparent we're at the same position of accessing the ID from outside the function call. I like to define them outside of the JSX, and then when we add the useCallback function it stays nice and clean and separated

Collapse
seanmclem profile image
Seanmclem

But it's pure

Thread Thread
jacobmparis profile image
Jacob Paris Author

PURE

return (
    <Button
        productId={product.id}
        onClick={e => (
            dispatch(removeItem(e.target.getAttribute("productId")))
        )}
    >Delete</Button>
);