In my task component on the parent div I am trying to make it so when reminder is set to true it adds a "reminder" class to the div, which just adds a border left. If reminder is set to false the "reminder" class will not be added.
I have checked and on double click the reminder does toggle between true and false so I know that works.
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 , you are not passing task.remainder , how will task.remainder changes ? Please pass task.remainder in onToggle function Your code must look like this .
<div className={task ${task.reminder ?'reminder' : ''}} onDoubleClick={() => onToggle(task.remainder)} className="task">
I think you are adding className 2 times in div element remove 2nd one then you will get your result. Actually, your logic is correct but you did that small mistake adding className 2 times.
Btw, there is 2 ways to implement that logic-
className={`${task.reminder ? 'task reminder' : 'task'}`}
className={`task ${task.reminder ? 'reminder' : ''}`}