Deep nested array of objects not rendering

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 enter image description here

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 enter image description here

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.

enter image description here enter image description here

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.

Answers:

Answer

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.