React:State

folder Projet: test_react_project
State: est similaire à un propos mais il est private et controller par sa component ,c'est un objet javascript qui stock l'état des données de la component en temps reél,permettant de controller le comportement de la component
Le changement de la valeur du State implique le render de la component

Exemple

Créer la component TestState permettant d'afficher les valeurs de sa State :

npx crcf components/TestState
TestState.js
import React, { Component } from "react";

class TestState extends Component {
  /*le constructeur de la component*/
  /*props :récupérer les données envoyées par le prent s'elles existent*/
  constructor(props) {
    /*Envoyer les données props à la classe mère dans ce cas Component*/
    super(props);
    //Créer une state
    this.state = {
      produit:{
        id: "1",
        nom: "produit1",
        qteStock: 40,
        prix: 15.3
      },
      villes:['Casa','Paris','madrid'],
      listeClient:[
        {nom:'client1',tel:'064454'},
        {nom:'client2',tel:'047858'},
        {nom:'client3',tel:'045212'}

      ]
    };
   
  }
  render() {
    return (
    <div>
      <fieldset>
        <legend>Produit Détails</legend>
        <table>
          <tr>
            <td>Id</td>
            <td>{this.state.produit.id}</td>
          </tr>
          <tr>
            <td>Nom</td>
            <td>{this.state.produit.nom}</td>
          </tr>
          <tr>
            <td>QteStock</td>
            <td>{this.state.produit.qteStock}</td>
          </tr>
          <tr>
            <td>Prix</td>
            <td>{this.state.produit.prix}</td>
          </tr>
        </table>
      </fieldset>

      <fieldset>
        <legend>Liste Villes</legend>
        <ol>
          {
            this.state.villes.map((ville)=>
            {
            return(
            <li>{ville}</li>
            )
            }
            )
          }
        </ol>
      </fieldset>

      <fieldset>
        <legend>Liste Client</legend>
        <table>
          <thead>
            <tr>
            <th>Nom</th>
            <th>Tel</th>
            </tr>
          </thead>
          <tbody>
            {this.state.listeClient.map((client)=>
            {
              return (
              <tr>
                <td>{client.nom}</td>
                <td>{client.tel}</td>
              </tr>)
            })}
          </tbody>
        </table>
      </fieldset>
   
    </div>);
  }
}

export default TestState;

App.js
  /*Importer le Css */
  import React from 'react';
  import './App.css';
  /*Importer TestState Component */
  import TestState from './components/TestState/TestState';
  class  App extends React.Component{
    constructor(props)
    {
      /*Appeler le constructeur del classeMere React.Component */
      super(props);
     
    }
     
    render()
    {
      return (
        <div>
       <TestState />
        </div>
        );
      }
    }
    export default App;
npm start