FICHIER index.js

import React, { StrictMode } from "react";
import ReactDOM from "react-dom";
import Client from "./Refclient";

// import App from "./App";

class App extends React.Component {
  clientimput = React.createRef();

  state = {
    clients: [
      { id: 1, nom: "toto" },
      { id: 2, nom: "tutu" },
      { id: 3, nom: "titi" }
    ],
    nouveauclient: ""
  };

  handledelete = (id) => {
    const clients = this.state.clients.slice();
    const index = clients.findIndex((client) => client.id === id);
    clients.splice(index, 1);
    this.setState({ clients: clients });
  };

  handlechange = (event) => {
    const value = event.currentTarget.value;
    this.setState({ nouveauclient: value });
  };

  handlesubmit1 = (event) => {
    event.preventDefault();
    const clients = this.state.clients.slice();
    const nom = this.clientimput.current.value;
    const idun = new Date().getTime();
    const client = { id: idun, nom: nom };
    clients.push(client);
    this.setState({ clients: clients });
    console.log({ idun });
  };

  handlesubmit2 = (event) => {
    event.preventDefault();

    const idun = new Date().getTime();
    const nom = this.state.nouveauclient;

    const client = { id: idun, nom: nom };

    const clients = this.state.clients.slice();
    clients.push(client);
    this.setState({ clients: clients, nouveauclient: "" });
  };

  render() {
    const title = "liste des souhaits";
    const element = <p>Test variable</p>;

    return (
      <div>
        <h1>{title}</h1>
        {element}
        <ul>
          {this.state.clients.map((client) => (
            <Client details={client} ondelete={this.handledelete} />
          ))}
        </ul>
        <form onSubmit={this.handlesubmit1}>
          <input
            ref={this.clientimput}
            type="text"
            placeholder="Ajout souhait 1"
          />{" "}
          <button>Validation</button>
        </form>
        <form onSubmit={this.handlesubmit2}>
          <input
            value={this.state.nouveauclient}
            onChange={this.handlechange}
            type="text"
            placeholder="ajouyer un souhait2"
          />
          <button>Validation</button>
        </form>
      </div>
    );
  }
}

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