Answer a question

I want to incorporate 3 more conditional classes into this...

<li className={`list-group-item ${todo.completed ? " strike-through" : ""}`}

I now want ${todo.priority} to be included/alongside with this, which will assign classes:

"alert alert-info", "alert alert-warning", and "alert alert-danger" based on corresponding values in a drop down: 1, 2, 3.

Can someone help me with this, thank you in advance!

Answers

Others have already provided some more "flexible" solutions, so I'll just add the quick and dirty one:

<li className={`list-group-item ${todo.completed ? " strike-through" : ""} ${todo.priority === 1 ? "alert alert-info" : (todo.priority === 2 ? "alert alert-warning" : "alert alert-danger")}`} />

For readability's sake:

const completed = todo.completed ? " strike-through" : "";
const priority = todo.priority === 1 ? "alert alert-info" : (todo.priority === 2 ? "alert alert-warning" : "alert alert-danger");
...
<li className={`list-group-item ${completed} ${priority}`} />