React:Changer la valeur du State

State avec un objet Simple

Créer la component ExempleState1 permettant de changer du state avec un objet simple

npx crcf components/ExempleState1

ExempleState1.js

import React, { Component } from "react";

class ExempleState1 extends Component {
  constructor(props)
  {
    super(props)
    this.state={
      variable1:''
    }
   
  }
  //fin constructeur
 
  changerVariable1=(event)=>
  {
    this.setState({
      variable1:"Nouvelle Valeur"
    })
  }
 
  render() {
    return (
      <div>
      variable1={this.state.variable1}
      <input  type="button" onClick={this.changerVariable1} value="Changer Variable1"/>
     
      </div>)
      ;
    }
  }

export default ExempleState1;

App.js

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

npm start

State avec un objet complexe

Créer la component ExempleState2 permettant de changer du state avec un objet complexe

npx crcf components/ExempleState2

ExempleState2.js

import React, { Component } from "react";

class ExempleState2 extends Component {
  constructor(props)
  {
    super(props)
    this.state={
      produit:{
        libelle:'produit1',
        prix:45.41,
        marque:'marque1'
      }
    }
  }
    changerLibelle=(event)=>
    {
      this.setState({
        produit:{
          ...this.state.produit, /*Récuper le produit courant */
          libelle:"Nouvelle libelle"} /*Puis changer la valeur d'un attribut */
      })
    }


    changerPrix=(event)=>
    {
      this.setState({
        produit:{
          ...this.state.produit,
          prix:210}
      })
    }

    changerMarque=(event)=>
    {
      this.setState({
        produit:{
          ...this.state.produit,
          marque:"Nouvelle marque"}
      })
    }

 
  render() {
    return (
    <div>
   Libelle:        {this.state.produit.libelle}
    <input type="button" onClick={this.changerLibelle} value="Changer"/>
   
   <br/>Libelle:   {this.state.produit.prix}
    <input type="button" onClick={this.changerPrix} value="Changer"/>

   <br/>Libelle:   {this.state.produit.marque}
   <input type="button" onClick={this.changerMarque} value="Changer"/>

    </div>);
  }
}

export default ExempleState2;

App.js

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