Exercice:Style Dynamique

folder Projet: test_react_project
Créer une application qui permet de changer le shape et la couleur d'un objet graphique

App.js

import React from 'react';
import './App.css';
class App extends React.Component{
  constructor(props)
  {
    super(props);
    this.state={
      leStyle:{
        width:'100px',
        height:'100px',
        background:'red',
        borderRadius:'0px'

      }
    }
   
}

changerObjet=(e)=>{
  let leType=e.target.name.toString();
  let laValeur=e.target.value.toString();
  let leRaduis="";
//si le shape est changé
  if(leType=='shape')
  {
    if(laValeur=='carre')
    {
      leRaduis="0px";
    }
    else if(laValeur=='circle')
    {
      leRaduis="50%";
    }

    this.setState(
      {
        leStyle:{
          ...this.state.leStyle,
          borderRadius:leRaduis

        }
      }
    )
   

  } //fin change shape

 if(leType=="color")
 {
  this.setState(
    {
      leStyle:{
        ...this.state.leStyle,
        background:laValeur

      }
    }
  )
 }

}
  render()
  {
    return (
      <div>
     
      <fieldset>
      <legend>Test Shapes</legend>
     <table style={{width:'100%' }}>
      <tr style={{width:'100%' }}>
        <td>Shape</td>
        <select name="shape" onChange={this.changerObjet} style={{width:'100%' }} >
         <option disabled selected>Choisir le type du Shape</option>
          <option value="circle">Cicle</option>
          <option value="carre">Carré</option>
        </select>
      </tr>
      <tr>
        <td>Color</td>
        <input type="color" name="color" onChange={this.changerObjet}  style={{width:'100%' }}/>
      </tr>
     </table>
     <hr/>
     <div style={this.state.leStyle}></div>
      </fieldset>
      </div>
     
      );
     
    }
   
  }
  export default App;