Reputation: 3213

react.js not updating state in html on array data update

I have data like this.

var data = [
{name : 1, data :[{age : 20, address : '233'},
                  {age : 20,    address : '233'}]},
{name : 2, data :[{age : 20, address : '233'},
                  {age : 20, address : '233'}]}]

On render function i have two loops like this. The data array is created using the ajax calls which takes time and fill the data array for each name. Now in html i never see the inner loop html render in the broswer. I can see the length is updating from 0 to 2 but html does not update.

{this.state.data.map(function(main) {
   return <div><div>{main.name}{main.data.length}</div>// Length shows 0 on load and after all ajax call shows as 2 in html
    {data.map(function(child) {
       return <div>{child.age}</div>;// This never work
    })}
    <div>;             
})}

Upvotes: 0