React:State(Formulaire)

Créer un formulaire d'inscription d'un étudiant

npx crcf components/Formulaire

Formulaire.js

import React, { Component } from "react";

class Formulaire extends Component {
  constructor(props)
  {
    super(props)
   
    this.state={
    etudiant:{
      nom:'',
      prenom:'',
      age:''
    }
    }


  }

  //récupéer les valeur saisie puis chagner l'état de l'objet State
  recuperValue=(e)=>
  {
    this.setState(
      {
        etudiant:{
        ...this.state.etudiant,/*Récupéer l'objet courant */
        [e.target.name]:e.target.value
        /* e.target.name :récupéer le nom du l'input a changé ,nom,prenom ou age
          e.target.value :valeur de l'input*/
      }
    }
    )
  }

  valider=(e)=>
  {
    let nouveau='';
    nouveau+='<tr><td>'+this.state.etudiant.nom+'</td>';
    nouveau+='<td>'+this.state.etudiant.prenom+'</td>';
    nouveau+='<td>'+this.state.etudiant.age+'</td></tr>';
   
document.getElementById("listeEtudiants").innerHTML+=nouveau;
  }

  render() {
    return <div>
  <fieldset>
    <legend>Inscription</legend>
    <table>
      <tr>
        <td>Nom</td>
        <td><input type="text"name="nom" onChange={this.recuperValue} /></td>
      </tr>

      <tr>
        <td>Prénom</td>
        <td><input type="text" name="prenom" onChange={this.recuperValue}/></td>
      </tr>

      <tr>
        <td>Age</td>
        <td><input type="number" name="age" onChange={this.recuperValue} /></td>
      </tr>
      <tr>
        <td></td>
        <td><input type="button" value="Valider" onClick={this.valider} /></td>
      </tr>
    </table>
  </fieldset>

  <fieldset>
    <legend>Valeur du state</legend>
    <table>
      <tr>
        <td>Nom</td>
        <td>{this.state.etudiant.nom}</td>
      </tr>
      <tr>
        <td>Prénom</td>
        <td>{this.state.etudiant.prenom}</td>
      </tr>
      <tr>
        <td>Age</td>
        <td>{this.state.etudiant.age}</td>
      </tr>
    </table>
  </fieldset>

  <fieldset>
    <legend>Liste Etudiants</legend>
    <table>
      <thead>
        <th>Nom</th>
        <th>Prénom</th>
        <th>Age</th>
      </thead>
      <tbody id="listeEtudiants">

      </tbody>
    </table>
  </fieldset>
    </div>;
  }
}

export default Formulaire;

App.js

  import React from 'react';
  import './App.css';
import Formualire from './components/formualire/formualire';
  class  App extends React.Component{
    constructor(props)
    {
      super(props);
     
    }
   
    render()
    {
      return (
        <div>
        <Formualire />
        </div>
        );
      }
    }
    export default App;
npm start