react - class

index.html

<div id="root"></div>

react-class.markdown

react - class

A Pen by Olivier Duhart on CodePen.

License.

script.babel

class Composant extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {
      message : "Hello"
    };
    this.onClickGoodBye = this.onClickGoodBye.bind(this);
  }
  
  render() {
    return (
      <div>
      <h1>{this.state.message} {this.props.toto} !</h1>
        <button type="button" class="btn btn-dark btn-block" onClick={this.onClickGoodBye}>toggle</button>
        </div>);
  }
  
  
  
  onClickGoodBye = event => {
    //alert("current state = >"+this.state.message+"<")
    var newMessage = "Bye" 
    switch(this.state.message) {
      case "Bye" : {
        newMessage = "Hello"
        break;
      }
      case "Hello" : {
        newMessage ="Bye"
      }
    }
    this.setState({message : newMessage});
  };
}

ReactDOM.render(
<Composant  toto="bidule"/>,               document.getElementById('root')
);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />