There are a list of elements like this:
<a href={productPath} target={openInNewTab ? '_blank' : '_self'}>
<figure>
<img src={imageBaseUrl() + img} alt={product.title} />
</figure>
{isFavorite ? (
<div className="remove-favorite" onClick={() => deleteCallBack(product.id)}>
Delete
</div>
) : null}
</a>
but when I want to click on div element, but my href is clicked.
You can do stopPropagation().
{isFavorite ?
<div
className="remove-favorite"
onClick={
(event) => {
event.stopPropagation();
event.preventDefault();
deleteCallBack(product.id);
}
}
>
Delete
</div>
) : null}stopPropagation prevents further propagation of the current event in the capturing and bubbling phases.
preventDefault prevents the default action the browser makes on that event.
You can use event.stopPropagation()
<div className="remove-favorite" onClick={(e) => {
e.stopPropagation()
deleteCallBack(product.id)
}}>
Delete
</div>
You should add into the link onClick event:
onClick={(event) => {
event.stopPropagation();
event.preventDefault();
}