Deep nested array of objects not rendering

Question

I have a fairly nested array which is formed from retrieving data from Firebase, modifying it and passing it down as props. The structure of the array is

Every array(2) has values pretty much in the same format. I'm trying to render the 2 months = 1, mild = 3, etc. datapoints from each 'array(2)'[0] object as well as the datapoints from 'array(2)' 1 such as RWJ = 2.5, (the 0 object right above it is the same exact format of data). I tried to first render the key 'RWJ' using the following

When I try to execute this, nothing renders. However, when I call a simple function which logs 'thirdData' to the console, it prints out exactly what I'm looking for.

thirdData = (value) => {
  console.log(value)
}

Pretty lost as too whats going on here, so any help would be appreciated. Also, when I use a much simpler array of the modified Firebase data, it renders, so I'm pretty sure there's no problem with the props being passed down after the component renders.

Answer 1

The problem is that you are not returning anything from inside the innermost map function.

return Object.keys(secondData).map((thirdData, i) => {
     return <div key={i}>
           {this.thirdData(thirdData)}
     </div>
}

P.S. Make sure you assign unique keys to iterator as well

One thing to note here is the difference between () => {} and () => (...), in the second case whatever you write is within (...) is returned explicitly whereas in the first case its a block from which you need to return the content

so you could have simply written

return Object.keys(secondData).map((thirdData, i) => (
     return <div key={i}>
           {this.thirdData(thirdData)}
     </div>
)