index.js

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";


class App extends React.Component {
  state = {
    elements: [
      { id:1, nom: 'foo' },
      { id:2, nom: 'bar' },
      { id:3, nom: 'clx' },
    ]
  }

  addElement = () => {
    const elements = this.state.elements.slice();
    let id = this.state.elements.length + 1;
    const drawLetter = () => String.fromCharCode(96 + (Math.floor(Math.random() * 26)));
    let nom = String.fromCharCode(96 + id) + drawLetter() + drawLetter();
    let newElement = { id: id, nom: nom };
    console.log('new element:', newElement);
    elements.push(newElement);
    this.setState({ elements: elements });
  }

  handleDelete = (id) => {
    console.log(id);
  }

  render() {
    const title = "Liste d'éléments";
    return <div>
      <h1>{title}</h1>
      <ul>
        {this.state.elements.map((elem) => <li>{elem.nom} <button onClick={() => this.handleDelete(elem.id)}>x</button></li>)}
      </ul>
      <form>
        <input type="text" placeholder="Ajouter un élément..." />
        <button onClick={this.addElement}>Ajouter</button>
      </form>
    </div>;
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);