How to access and smoothly transition methods and this.state in componentWillReceiveProps to getDerivedStateFromProps?

Question

  componentWillReceiveProps(nextProps) {   

     if (
        **this.state.clicked** &&
        this.props.something &&
        nextProps.addSubtract
      ) {
          this.setState({ valid: nextProps.isValid });
        }


        if (!this.props.someItems) {
           this.setState({ products: nextProps.propsValues});
        }

        if (nextProps.valueOfProps && **this.methodOnClass**) {
            ..........
            ..........
        }
    }

The code above is similar to a new project I'm working on and I have encountered a road-block. Since componentWillReceiveProps is deprecated and I need to replace a lot of code inside it with this.method and this.state , is there a way to access these in getDerivedStateFromProps without moving a lot of logic in other lifecycle methods.

score 0 · Answer 1 · answered Sep 11 '18 at 16:21

First of all getDerivedStateFromProps is not a replacement of componentWillReceiveProps. See this post for more detail.

To return the state by using getDerivedStateFromProps, you simply return an object.

Example:

return {
  myState: 'updated state'
}

If no condition match, simply return null:

return null

Similar to setState example:

setState({myState: 'updated state'})

How to access and smoothly transition methods and this.state in componentWillReceiveProps to getDerivedStateFromProps?

1 Answers1