React – Application voiture 2

Zoom

class App extends React.Component {

state = {
   titre: "Mon catalogue voiture"
  }
  
changeTitle = (ev) => {
  this.setState({
    titre:'Mon nouveau titre'
  })
}
 
 
changeViaParam = (param) => {
  this.setState({
    titre: param
  })
} 

changeViaBind = (param2) => {
  this.setState({
    titre: param2
  })
} 

changeViaInput = (event) => {
  this.setState({
    titre: event.target.value
  })
} 
  
  render() {
     
    return (
        <div>
            < MesVoitures  title={this.state.titre} />
            <button onClick ={this.changeTitle}>Titre en dur</button><br/>
            <button onClick ={() => this.changeViaParam("Via paramètre")}>Via param</button><br/>
            <button onClick ={this.changeViaBind.bind(this, "Via bind")}>Via Bind</button>
            <input type="text" onChange={this.changeViaInput} value={this.state.titre} />
        </div>
    );
  }
}

class MesVoitures extends React.Component {

addStyle = (e) => {
  
e.target.classList.toggle('styled');
}

state  = {
     cars: [
          {brand: "Ford", color: "noire"},
          {brand: "Peugeot", color: "rouge"}
          
         ]
         
  }

  render() {
      return (
          <div>
              <h1 onMouseOver={this.addStyle}>{this.props.title}</h1>
              <Voiture marque={this.state.cars[0].brand} couleur={this.state.cars[0].color} /> 
              <Voiture marque={this.state.cars[1].brand} couleur={this.state.cars[1].color} /> 
              
              {
                  this.state.cars.map(vehicule =>{
                      return(
                          <Voiture marque={vehicule.brand} couleur={vehicule.color} /> 
                      )            
                  })
              }
          </div>
    );
  }
}

const Voiture = (props) => {


  return (
    <div className="voiture">
      <p>Marque  : { props.marque }</p>
      <p>Couleur : { props.couleur }</p>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

Zoom

Testez vos propres exemples sous Jsfiddle. Cliquez ici