React state three

Starting point for creating JSFiddles with React.

by Michel Piallier

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

CSS

.styled {
  color: red;
  }
  
  .voiture {
  Background-color: #d65663;
  }

React

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');
}

  render() {
    return (
      <div>
        <h1 onMouseOver={this.addStyle}>{this.props.title}</h1>
        <Voiture marque="Ford" couleur= "noire" />
        <Voiture marque="Peugeot" couleur= "rouge" />
        
      </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"));