Reactjs - Setting State from props using setState in child component

Solution 1:

componentWillMount is called only once in the component lifecycle, immediately before the component is rendered. It is usually used to perform any state changes needed before the initial render, because calling this.setState in this method will not trigger an additional render So you can update your staate using

componentWillMount ()
{

        this.setState({ members : props.members });


}

Solution 2:

As @Vikram also said, componentWillReceiveProps is not called for the first time, so when your component is initially mounted your state is not getting set, so you need to set the state with props in the componentWillMount/componentDidMount function(which are called only on the first render) also along with the componentWillReceiveProps function

componentWillReceiveProps = props => {
    if(props.members !== this.props.members) {
        this.setState({ members : props.members });
    }
}

componentWillMount() {
     this.setState({ members : this.props.members });
}

From version 16.3.0 onwards, you would make use of getDerivedStateFromProps method to update the state in response to props change,

getDerivedStateFromProps is invoked after a component is instantiated as well as when it receives new props. It should return an object to update state, or null to indicate that the new props do not require any state updates.

static getDerivedStateFromProps(nextProps, prevState) {
    if(nextProps.members !== prevState.memebers) {
         return { members: nextProps.members };
    }
    return null;
}

EDIT: There has been a change in getDerivedStateFromProps API from v16.4 where it receives props, state as arguments and is called on every update along with initial render. In such a case, you can either trigger a new mount of the component by changing the key

<SortByAlphabet  key={members} />

and in SortByAlphabet have

componentWillMount() {
     this.setState({ members : this.props.members });
}

or use getDerivedStateFromProps like

static getDerivedStateFromProps(props, state) {
    if(state.prevMembers !== props.members) {
         return { members: nextProps.members, prevMembers: props.members };
    }
    return { prevMembers: props.members };
}