1

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.

sWarren
  • 473
  • 2
  • 4
  • 10
  • Possible duplicate of [React Js conditionally applying class attributes](https://stackoverflow.com/questions/30533171/react-js-conditionally-applying-class-attributes) – Alexander Staroselsky Oct 31 '18 at 17:34

1 Answers1

3

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" : ""}`} />
Ryan
  • 46
  • 2
  • Hey @Ryan, or anyone, how would I refer to `completed` when it is the given value of property inside an array of todo items (the total of which is in state): this.state = { id: 0, todos:[{id:0, completed = false}, {id:1, completed = true}, {id:2, completed = true}] I want to refer to the completed value of a given 'todo' item, as a property.. something like completed=this.state.todos.completed , which can be referred to as something like props.completed , if that makes sense? – sWarren Oct 31 '18 at 19:58
  • So in that case I would map over this.state.todos `return this.state.todos.map((todo)=> { return
    })`     – Ryan Oct 31 '18 at 20:08
  • Yep needed to be todo.completed! Thanks! – sWarren Oct 31 '18 at 20:22