CODEWITHSUNDEEP
reactjs
sWarren
sWarren

Reputation: 473

How to apply a CSS style in React based on condition and incorporate it with another class?

I am modifying the value of a property for certain list items in an array, depending on whether or not a checkbox is checked/unchecked. The list items are named todo and the property where I am storing whether or not the checkbox is checked/unchecked (T/F) on a given todo, is called completed

Given this handler, where I am adjusting the value of an individual todo's completed property when a check box is checked/unchecked:

handleCompletedTodo(todo) {
    var completedTodoId = todo.id;
    var found = this.state.todos.find(todosArray=>todosArray.id === completedTodoId);
      if(found) found.completed = !found.completed;
  }

How can I now set a CSS conditional style to it's text (named: "strike-through") in this stateless component, to indicate that a todo's item's completed value is T/F? Please note there is already a class that is present called "list-group-item", which will have to be incorporated with the conditional style:

<ul className = "list-group">
      {props.todosArray.map(todo => {
          return <li className='list-group-item' key ={todo.id}><input type="checkbox" onChange= {() => props.onDone(todo)}/>{todo.text}<a onClick={() => props.onEdit(todo)}
          className="edit-todo glyphicon glyphicon-edit d-flex justify-content-between align-items-center" href="#"></a><a onClick={() => props.onDelete(todo)}
          className="delete-todo glyphicon glyphicon-trash" href="#"></a></li>
        })
      }
    </ul>

Thank you for your help.

Upvotes: 1

Views: 885

Answers (1)

Ryan
Ryan

Reputation: 46

You can use a ternary operator to and ES6's string interpolation using backticks inside of classname.

<div className={`some other classes${completed ? " strike-through" : ""}`} />

Upvotes: 3

Related Questions