Hay una lista de elementos como este:
<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> pero cuando quiero hacer clic en el elemento div , pero se hace clic en mi href .
Puedes hacer stopPropagation() .
{isFavorite ? <div className="remove-favorite" onClick={ (event) => { event.stopPropagation(); event.preventDefault(); deleteCallBack(product.id); } } > Delete </div> ) : null} stopPropagation evita una mayor propagación del evento actual en las fases de captura y burbujeo.
preventDefault evita la acción predeterminada que realiza el navegador en ese evento.
Puedes usar event.stopPropagation()
<div className="remove-favorite" onClick={(e) => { e.stopPropagation() deleteCallBack(product.id) }}> Delete </div>Debe agregar en el evento onClick del enlace:
onClick={(event) => { event.stopPropagation(); event.preventDefault(); }