Activer une action sur l'item sélectionné React

class ShoppingList extends Component {
  constructor(props) {
    super(props);

    this.state = {
      newItem: '',
      list: [],
    };

    this.doneItem = this.doneItem.bind(this);
  }

 updateInput(key, value) {
    // mettre à jour l'état du state
    this.setState({ [key]: value });
  }

  addItem() {
    // créer un nouvel élément avec un identifiant unique
    const newItem = {
      id: 1 + Math.random(),
      value: this.state.newItem.slice(),
    };

    // copier la liste actuelle des éléments
    const list = [...this.state.list];

    // ajouter un nouvelle élément à la liste
    list.push(newItem);

    // mettre à jour l'état avec une nouvelle liste. réinitialiser la nouvelle entrée d'éléments
    this.setState({
      list,
      newItem: '',
      done: false,
    });
  }
 deleteItem(id) {
    // filtrer l'élément en cours de suppression
    const updatedList = this.state.list.filter((item) => item.id !== id);
    this.setState({ list: updatedList });
  }

  doneItem() {
    this.setState((state) => ({
      done: !state.done,
    }));
  }

render() {
    return (
      <div>
        <div className="container">
          <div className="title">
            Ma liste de courses
          </div>
          <form>
            <input
              className="input"
              type="text"
              placeholder="Entrer un produit"
              value={this.state.newItem}
              onChange={(e) => this.updateInput('newItem', e.target.value)}
            />
            <button
              type="submit"
              className="add-btn btn-floating"
              onClick={() => this.addItem()}
              disabled={!this.state.newItem.length}
            >
              Ajouter
            </button>
          </form>
          <br />
          <ul>
            {this.state.list.map((item) => (
              <li
                className={this.state.done === false ? 'task' : 'task--done'}
                key={item.value}
                done={this.state.done}
              >
                {item.value}
                <button
                  type="submit"
                  className="btn btn-floating"
                  onClick={() => this.deleteItem(item.id)}
                >
                  <i className="material-icons">X</i>
                </button>
                <button
                  type="submit"
                  className="done-btn btn-floating"
                  onClick={() => this.doneItem(item.id)}
                >
                  <i className="material-icons">V</i>
                </button>
              </li>
            ))}
          </ul>
        </div>
      </div>

    );
  }
}

export default ShoppingList;