Reactjs - Setting State from props using setState in child component

Question

I'm having the following class that renders users based on a sort dropdown. Users will be listed in alphabetical order if i choose "alphabetical" and in group order when i choose "group".

render(){
    return(
        const {members, sort} = this.state
        { sort === "alphabetical" && <SortByAlphabet members={members} /> }
        { sort === "group" && <SortByGroup members={members}/> }
    )
)

In <SortByAlphabet /> component I am setting a component state object from props.members in componentWillReceiveProps() function.

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

When I choose "group" sort, <SortByAlphabet /> component is unmounting and <SortByGroup /> is mounting in the DOM. Again when i switch back to "alphabetical" sort, the state variable (members) that was set previosly in <SortByAlphabet /> component becomes NULL because the component was removed from the DOM.

componentWillReceiveProps function is not triggering the second time when re-rendering <SortByAlphabet /> b'coz the props didn't change. But i want to update the state variable like i did it for the first time in componentWillReceiveProps function.

How to do that?

Using different components to render sorting order is not a good choice. From the doc: "Two elements of different types will produce different trees.". So even though all your children elements are the same (just ordered diffently), they will be destroyed and recreated instead of just being reordered. See https://reactjs.org/docs/reconciliation.html for detailed explaination. — cquezel, Mar 17 '18 at 12:55

Vikram Saini · Accepted Answer · 2017-05-04T11:47:31.617

6

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 });


}

edited May 04 '17 at 11:47

answered May 04 '17 at 10:02

Vikram Saini

2,713
1
16
33

2

I don't understand your code. Do you really mean to redefine `componentWillReceiveProps` •inside• `componentWillMount`? What will that do? – Viktor Sec May 04 '17 at 10:17
1

just set the state inside willmount – Vikram Saini May 04 '17 at 11:47
Sure, makes sense now :) – Viktor Sec May 04 '17 at 11:48
setState is async. You should not use it in `componentWillMount`. Use `componentDidMount` instead. – user1449456 Jan 16 '18 at 13:59
but componentDidMount is called after page is rendered once but in this scenario we have to make any changes before first render of page is done – Vikram Saini Jan 17 '18 at 04:43
componentWillMount is deprecated and will be removed in future version – Rajendran Nadar Jul 19 '18 at 08:59

Shubham Khatri · Answer 2 · 2019-01-03T11:21:41.537

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 };
}

Sorry dude while voting your answer I pressed the downvote button and the vote is locked until you edit the answer. Please edit the answer so that I can remove my vote. — Rajendran Nadar, Jul 22 '18 at 11:25

Reactjs - Setting State from props using setState in child component

2 Answers2

Linked

Related