Почему при вызове события вешается на все элементы списка?

Question

[Сергей]

Здравствуйте.

При клике на таск он должен перечеркиваться. Вешаю обработчик на отдельный итем таска, но при клике почему-то все таски в списке зачеркиваются, подскажите пожалуйста, почему так? (за перечеркивание таска отвечает класс "completed")

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();
  }
}

Comments

[FabiBoom]

У тебя компонент TodoListItem, а рендерит массив элементов почему так?

Answer 1

[Роман Дворянов]

Вы выводите список итемов в компоненте с названием одного итема, соответственно состояние(state) у них всех общее