Stuck on a test lesson?

Question

css

Now I'm watching video tutorials on react, parsing state, setState.
In the code below, only one state-changing function works, namely onLabelClick. The onMarkClick function either doesn't work, or works in the same way as onLabelClick, although it is called on another object - on the button.
Below is the React and Css code:

import React from 'react';
import './todo-list-item.css';

class TodoListItem extends React.Component {
    state = {
        done: false,
        important: false
    };

    onLabelClick = () => {
        this.setState({
            done: true
        });
    };
    onMarkClick = () => {
        this.setState({
            important: true
        });
    }
    render () {
       const { label } = this.props;
       const { done, important } = this.state;
       let classNames = "todo-list-item";
       if (done) {
        classNames +=  " done"
       };
       if (important) {
           classNames += " important"
       };
        return (
         <span>
           <span className= {classNames} 
              onClick= {this.onLabelClick} >{ label }
              <button type="button"  onClick= {this.onMarkClick } ><i className="fa fa-exclamation"/></button>
            </span>
        </span> 
        )
    }
}
export default TodoListItem ;

.todo-list-item.done  {
 text-decoration: line-through;
};

.todo-list-item.important  {
    font-weight: bold;
    color: blue;
}
.fa {
    color: green;
}

Answer 1

1. You need to either stop the event from bubbling:

onMarkClick = (e) => {
    e.stopPropagation();
    this.setState({
      important: true,
    });
  };

or change the structure:

return (
  <span>
    <span
      className={classNames} 
      onClick={this.onLabelClick}
    >
      {label}
    </span>
    <button type="button"  onClick= {this.onMarkClick}>
      <i className="fa fa-exclamation"/>
    </button>        
  </span> 
);

2.

.todo-list-item.done {
  text-decoration : line-through;
}