Ad

How Can I Keep State In A React Component Using ES6

- 1 answer

I'm trying to use a stateful React component with ES6 but when I define a constructor the constructor will only be called once while the component is rendered multiple times (from its parent). Example shown below.

class SubComponent extends React.Component {
  constructor(props) {
    super(props);
    console.log("Creating sub component");
    this.state = { count: props.count };
  }

  render() {
    console.log("Rendering sub component", this.state.count);
    return (<div>count: {this.state.count}</div>);
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    console.log("Creating app");
    this.state = { count: 0 };
    this.tick = this.tick.bind(this);
    setInterval(this.tick, 1000);
  }

  tick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    console.log("Rendering app", this.state.count);
    return (<SubComponent count={this.state.count} />);
  }
}

This will not update the rendered output (it will always be count: 0) but the logs will output:

Creating app
Rendering app 0
Creating sub component
Rendering sub component 0
Rendering app 1
Rendering sub component 0
Rendering app 2
Rendering sub component 0
Rendering app 3
Rendering sub component 0
...

Here's a JSFiddle: http://jsfiddle.net/jor0xu1a/1/

I'm aware that thsfiddle.net/jor0xu1a/1/

I'm aware that the example SubComponent doesn't need a state but I tried making it as simple as possible to show my problem.

What am I missing?

Ad

Answer

I recommend to read Props in getInitialState Is an Anti-Pattern.

Basically, as few components as possible should have state. As the other answers already said, in your case you can just use this.props.count to refer to the current value. There doesn't seem to be any reason why SubComponent should have its own state.

However, if you really want to compute the component's state from the props it receives, it is your responsibility to keep them in sync, with the life cycle method componentWillReceiveProps:

componentWillReceiveProps(nextProps) {
    this.setState({count: nextProps.count});
}
Ad
source: stackoverflow.com
Ad