Child component returns props as null

Question

I am fetching data from api in the parent and I'm sending the data as a prop to the child component. When I try consoling the props it returns null. Dont know why. But the props are getting displayed when the child component is rendered again

This is parent component

componentWillMount(){
        fetch('http://13.234.252.37:5000/api/user_information/'+ this.props.propUser_id)
        .then(response => response.json())
        .then(data => {
            console.log(data);
            this.setState({fileUploadedData: data.Documents, dashboardPiscore: data.piscore}, () => {
                console.log("set sytate", this.state.fileUploadedData);
            })
        })
    }

return(
this.state.dashboardHome ? <DashboardHome analysisData={this.state.fileUploadedData} /> : null 
)

This is the child component

class dashboardHome extends Component{
  constructor(props){
    super(props);
    console.log("props in cons", this.props);
    this.state= {
      annualIncome: '0',
      monthlyExpense: '0',
      monthlySavings: '0',
    }
  }

  componentDidMount(){
    console.log("props in home", this.props);
    if(this.props.analysisData !== null) 
    {
      this.setState({
      annualIncome: this.props.analysisData[0].Salary,
      monthlyExpense: this.props.analysisData[1].average_monthly_expense,
      monthlySavings: this.props.analysisData[1].average_monthly_savings
      })
 render(){  
return(
<div>//dashboard</div>
)
}

For the first time when component renders the props is consoled as null. When I render it again the props value are set. Please help me out with a way to set the props at the first rendering of the component. The props are null now. When I click on some other tab of dashboard and come back again to the dashboard the props are set properly as expected

Why do you use fetch in componentWillMount ? The correct method should be componentDidMount — mstfyldz
Even if I use it in DidMount it didn't work properly. I just tried that out. — Hareini Sreethi

giorgi moniava giorgi moniava · Accepted Answer · 2019-05-23T11:49:44

Normally it is advised to use componentDidMount instead of componentWillMount. Also, you said yourself you are fetching data from Api. Before the data is fetched and stored in state, of course the initial props passed to the child will be empty. If that causes issues, you may consider using some default values, before the real data arrives. Or you can also not render the child component at all before the data arrives, and show loading indicator.

Child component returns props as null

2 Answers