Passing props from state, into componentDidMount

Question

I have class which makes an api call, and sets the response data as the state value like so

    export class TestClass extends React.Component {
    state = {
       data: null 
    }

    componentDidMount(){
       fetch('http://www.nfl.com/feeds- 
       rs/bigPlayVideos/2018/REG/1.json')
       .then(response => response.json())
       .then(res => this.setState({ data: res.bigPlays }))
    }

The above code works and sets the state correctly. Then in the render i pass the properties like so.

     render (){
       const {data} = this.state;

       return ( 
        <div>
         <ChildComponent data={data} />
         </div>
        )
        }

My Child component looks like so

    componentDidMount(){
      const {data} = this.props
     }

The data prop comes in correctly in the render after the page updates but comes in as null in the componentDidMount. I need to do some further state updates, so is there anyway i can get access to the values in the componentDidMount(), if not where would be the best place to do further state logic in the ChildComponent class.

Any help is much appreciated, thanks.

score 1 · Answer 1 · answered Jul 22 '19 at 16:53

1

You probably want to use componentDidUpdate since state.data in the parent is initially null.

If you only want to deal with non-null data only mount the child once data !== null: return <div>{data !== null && <ChildComponent data={data} />}</div>

answered Jul 22 '19 at 16:53

Sebastian

3,322
22
34

score 1 · Answer 2 · answered Jul 22 '19 at 16:55

What you can do is use componentDidUpdate and check if this.props.data isn't null.

componentDidUpdate() {
    const {data} = this.props
    if(data != null){
        // do what you want
    }
}

But you should also have one more condition to avoid that from happening on every render.

What you can also do is pass a default value to data.

const { data = [] } = this.props // default value is an array.

score 1 · Accepted Answer · answered Jul 22 '19 at 16:57

It's a normal behavior, since what actually happens is as follows: a componentDidMount of any parent component is not invoked unless all of it's childrens componentDidMount is invoked.

So, if component B is a child for component A, component B componentDidMount methods will be invoked before the one for A component since B is a child for A.

Passing props from state, into componentDidMount

3 Answers3