En mi componente de tarea en el div principal, estoy tratando de hacer que cuando el recordatorio se establezca en verdadero, agregue una clase de "recordatorio" al div, que solo agrega un borde a la izquierda. Si el recordatorio se establece en falso, la clase "recordatorio" no se agregará.
Lo he comprobado y al hacer doble clic, el recordatorio cambia entre verdadero y falso, así que sé que funciona.
const Task = ({ task, onDelete, onToggle }) => { return ( <div className={`task ${task.reminder ? 'reminder' : ''}`} onDoubleClick={() => onToggle(task.id)} className="task"> <h3>{task.text} <FaTimes onClick={() => onDelete(task.id)} style={{ color: "red", cursor: "pointer" }} /> </h3> <p>{task.day}</p> </div> ) } export default Task .task { background: #f4f4f4; margin: 5px; padding: 10px 20px; cursor: pointer; } .task.reminder { border-left: 5px solid green !important; }onToggle, no está pasando task.remainder, ¿cómo cambiará task.remainder? Pase task.remainder en la función onToggle. Su código debe tener este aspecto.
<div className={ tarea ${task.reminder ?'reminder' : ''} } onDoubleClick={() => onToggle(task.remainder)} className="task">
Creo que está agregando className 2 veces en el elemento div, elimine el segundo y luego obtendrá su resultado. En realidad, su lógica es correcta, pero cometió ese pequeño error al agregar className 2 veces.
Por cierto, hay 2 formas de implementar esa lógica:
className={`${task.reminder ? 'task reminder' : 'task'}`}
className={`task ${task.reminder ? 'reminder' : ''}`}