Wiki Unbee

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
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
);