Why isnt the "completed" classname not working when i check it off as completed. I can see it is being toggled to true but somehow the classname isnt

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

>Solution :

You are not using backtick , you should change ' with backtick ` and you should remove space between $ and {