Dojo React state

App.jsx

import React, { Component } from 'react';
import Avatar from './Avatar';

class App extends Component {
  render() {
    return (
      <div>
        <Avatar
          name="Homer"
          avatar="http://www.simpsonspark.com/images/persos/contributions/homer-simpson-23004.jpg"
        />
      </div>
    );
  }
}

export default App;

Avatar.jsx

import React, { Component } from 'react';

class Avatar extends Component {
  constructor (props) {
    super(props);

    // seul endroit où on peut écrire
    // directement sur this.state
    this.state = {
      food: 50,
      isTired: true
    };

  }

  eatBurger = () => {
    this.setState({
      food: this.state.food + 100
    });
  }

  // toggle = inverser en anglais
  toggleSleep = () => {
    this.setState({
      isTired: !this.state.isTired
    })
  }

  // modifier à la fois food et isTired
  runMarathon = () => {
    this.setState({
      food: this.state.food - 200,
      isTired: true
    });
  }

  render() {
    const food = this.state.food;
    const isTired = this.state.isTired;
    return (
      <div>
        <h2>{this.props.name}</h2>
        <img src={this.props.avatar} />
        <p>Food: {food}</p>

        {/* ternaire pour afficher valeur en fonction de isTired */}
        <p>Status: {isTired ? "I feel sleepy" : "I'm all right"}</p>

        <button
          onClick={this.eatBurger}
        >
          eat burger
        </button>

        <button
          onClick={this.toggleSleep}
        >
          {/* Afficher go to sleep si isTired, go to work sinon */}
          {isTired ? "go to sleep" : "go to work"}
        </button>

        <button
          onClick={this.runMarathon}
        >
          run a marathon
        </button>
      </div>
    );
  }
}

export default Avatar;

Instructions.md

• Ecrire un composant pour représenter un personnage --> SOUS FORME DE CLASSE
• Le composant récupère comme props: name et avatar
• L'importer depuis App et l'appeler deux fois dans la div englobante de App
• Dans son constructeur, initialiser un state: { food: 50, isTired: false }
• Dans le render, on va mettre 4 boutons:
  • "eat burger" ==> faire augmenter food de 100
  • "eat donut" ==> faire augmenter food de 50
  • "sleep" ==> faire passer isTired à false
  • "run" ==> faire passer isTired à true, diminuer food de 100
• Toujours dans le render:
  • afficher la valeur de food (qui vient du state)
  • afficher: si isTired: "je suis fatigué", sinon "je suis en pleine forme"