Условный оператор в реакции не работает с CSS ⇐ Html

[Anonymous]

В моем компоненте задачи в родительском div я пытаюсь сделать так, чтобы, когда для напоминания установлено значение true, в div добавлялся класс «напоминание», который просто добавлял левую границу. Если для напоминания установлено значение false, класс «напоминание» не будет добавлен.
Я проверил, и при двойном щелчке напоминание переключается между true и false, поэтому я знаю, что это работает.

const Task = ({ task, onDelete, onToggle }) => {
return (
className={`task ${task.reminder ?
'reminder' : ''}`}
onDoubleClick={() => onToggle(task.id)} className="task">
{task.text} onDelete(task.id)}
style={{
color: "red", cursor: "pointer"
}} />


{task.day}

)
}

export default Task


.task {
background: #f4f4f4;
margin: 5px;
padding: 10px 20px;
cursor: pointer;

}

.task.reminder {
border-left: 5px solid green !important;
}


Подробнее здесь: https://stackoverflow.com/questions/705 ... g-with-css