conditional operator in react not working with css-CodePudding

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; 
}

CodePudding user response：

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">

CodePudding user response：

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' : ''}`}