反应中的条件运算符不适用于 css

Question

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

Answer 1

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

Answer 2

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