7. States

Vastupidiselt Propsile on States mõeldud andmete edastamiseks komponendile ja nende muutmiseks komponendi poolt.

State on komponendi sisene muutuja, kui see edastatakse teisele komponendile siis saab sellest props.

States luuakse meetodiga constructor ():

import React from 'react';
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      txt: 'see on state tekst'
    }
  }
  render() {
    return <h1>Ho-hoo, {this.state.txt}.</h1>
  }
}
export default App

Staatuse? muutmine meetodiga update ():

  import React from 'react';
  class App extends React.Component {
    constructor() {
      super();
      this.state = {
        txt: 'see on state tekst'
      }
    }
    update(e) {
      this.setState({txt: e.target.value})
    }
    render() {
      return (
        <div>
  <input type="text"
    onChange={this.update.bind(this)}/>
        <h1>Ho-hoo, {this.state.txt}.</h1>
        </div>
      )
    }
  }
  export default App

NB! Kuna setState() on asünkroonne siis mitme setState() järjest kasutamisel ei täideta kõiki. Selle vältimiseks tuleb kasutada setState() andmete muutmiseks funktsiooni mitte objekti. See on vale kasutamise näide:

// Vale kasutamine
this.setState({
  loendur: this.state.loendur + this.props.increment,
});

Õige on (ES6 arrows-funktsioonina):

// Õige
this.setState((prevState, props) => ({
  loendur: prevState.loendur + props.increment
}));

või ka tavalise funktsioonina:

// Õige
this.setState(function(prevState, props) {
  return {
    loendur: prevState.loendur + props.increment
  };
});