Why is it hung on all elements of the list when the event is called?

Question

JavaScript

Hello.

When you click on a task, it should be crossed out. I hang the handler on a separate task item, but for some reason, when clicked, all the tasks in the list are crossed out, please tell me why? (the "completed" class is responsible for crossing out the task)

export default class TodoListItem extends React.Component {
  state = {
    isChecked: false,
  };

  onLabelClick = () => {
    this.setState(({ isChecked }) => {
      return {
        isChecked: !isChecked,
      };
    });
  };

  createTodoListItem = () => {
    const { todoData } = this.props;
    const completed = this.state.isChecked ? 'completed' : null;
    const result = todoData.map(({ id, label }) => {
      return (
        <li key={id} className={completed}>
          <div className='view'>
            <input
              // checked={this.state.isChecked}
              className='toggle'
              type='checkbox'
            />
            <label>
              <span className='description' onClick={this.onLabelClick}>
                {label}
              </span>
              <span className='created'>created 17 seconds ago</span>
            </label>
            <button className='icon icon-edit'></button>
            <button className='icon icon-destroy'></button>
          </div>
        </li>
      );
    });
    return result;
  };

  render() {
    return this.createTodoListItem();
  }
}

Answer 1

You display a list of items in a component with the name of one item, respectively, the state (state) they all have in common