How to add color to a line-through click event within react?(without it changing the font color too)

Question

All I'm trying to do here, is make it so that the line-through click event turns red upon clicking on it, but I can't seem to find an answer anywhere on how to do this. I tried a few things and nothing has worked. Edit: I added "color":"red" after "none" and now the line is red, but it also turned my font color red.

    <ul
    style={{
      textDecoration: this.props.completed ? "line-through" : "none"
    }}
    onClick={this.handleClick}
    >
    {this.props.task}
    </ul>

Answer 1

You're probably looking for 'the right react syntax for multiple conditional styling' .

Styling requires object then you can try sth like:

<ul
  style={{
    textDecoration: this.props.completed ? "line-through" : "none",
    color: this.props.completed ? "red" : "black"
  }}
  onClick={this.handleClick}
>
{this.props.task}
</ul>

You should read this docs - better solution is to define css class 'task-completed' (red, line-through, italic, whatever) and assign this class conditionally. It can be done (by className) as in docs or a few other ways, fe

<ul className={`task-item ${this.props.completed ? " task-completed" : ""}`}
      onClick={this.handleClick}
>
  {this.props.task}
</ul>

or without ternary operator

className={`task-item ${this.props.completed && "task-completed"}`}

For more complex dependencies you can use classnames