Logo

Dodajmy stan

git checkout 2-state -f

Render jest jedną z wielu kluczowych rzeczy, które dziedziczymy od React.Component. Drugą najważniejszą jest stan - nasz lokalny, tymczasowy stan komponentu.

Zrobimy taką funkcjonalności - będziemy wyświetlać ilość kliknięć.

Zacznijmy od samego dodania stanu. Poza render dodaj

class App extends React.Component {
  state = {
    counter: 0,
  };
  render() {
    // reszta
  }
}

Mamy początkowy stan i warto byłoby go wyświetlić.

Zacznijmy od wyświetlenia go w konsoli. Funkcja render odpala się za każdym razem gdy zmieni się stan lub propsy.

 state = {
    counter: 0,
  };
  render() {
    console.log(this.state)
    // reszta
  }

Zwróć uwagę na this, który wskazuje na obecną instancję tej klasy! W taki sposób będziemy się odnosić do stanu (this.state), propsów (this.props) i samodzielnie zdefiniowanych funkcji