Tengo renderizado condicional. Cuando uso el evento onClick, todos mis componentes se actualizan. Mis funciones.
const reaction = (author) => { if (author == user.id){ return false }else{ return true } } const handleReactions = (reaction, id) =>{ if (reaction === 'like'){ httpClient.put(`/likes/${id}/`) .then((response) => { alert(response.data); }) } }Mi regreso
return ( {reaction(post.user) ?<form> <button type="submit" name="like" value={post.id} onClick={handleReactions('like', post.id)}> : //another conditional } )Prueba algo como:
return ( {reaction(post.user) ?<form> <button type="submit" name="like" value={post.id} onClick={() => handleReactions('like', post.id)}> : //another conditional })Explicación: está llamando a handleReactions directamente en lugar de dar la función para ejecutar cuando se hace clic en el botón. La solución define la función lambda que está llamando a su función dentro
PD: tu función:
const reaction = (author) => { if (author == user.id){ return false }else{ return true } }Se puede simplificar:
const reaction = (author) => author != user.id