I can see its changing to completed but the css isnt working anyone can help me please. {completed: true, id: 1288.4902006789644, text:...}
this is the code
<div className="todo">
<li className={'todo-item $ {todo.completed ? "completed" : ""}'}>
{text}
</li>
<button onClick={completehandler}>
<FontAwesomeIcon icon={faCheck} />
</button>
<button onClick={deletehandler}>
<FontAwesomeIcon icon={faTrashCan} />
</button>
</div>
this is the CSS
.completed{
text-decoration: line-through;
}
CodePudding user response:
You are not using backtick
, you should change '
with backtick ` and you should remove space between $ and {