Deep nested array of objects not rendering

by

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

More Related Contents:

  1. setState doesn’t update the state immediately
  2. Unable to access React instance (this) inside event handler [duplicate]
  3. What do multiple arrow functions mean in JavaScript?
  4. Adding script tag to React/JSX
  5. Arrow function without curly braces
  6. When to use ES6 class based React components vs. functional ES6 React components?
  7. Why and when do we need to bind functions and eventHandlers in React?
  8. What does three dots do in ReactJS [duplicate]
  9. React Native: require() with Dynamic String?
  10. React functional stateless component, PureComponent, Component; what are the differences and when should we use what?
  11. How to add multiple classes to a ReactJS Component?
  12. What is the difference between using constructor vs state = {} to declare state in react component?
  13. React useState hook event handler using initial state
  14. Can I use arrow function in constructor of a react component?
  15. Active link with React-Router?
  16. When should I use brackets with imports
  17. setState() inside of componentDidUpdate()
  18. Why do I have to .bind(this) for methods defined in React component class, but not in regular ES6 class
  19. where is create-react-app webpack config and files?
  20. Unable to use Arrow functions inside React component class [duplicate]
  21. Best way to polyfill ES6 features in React app that uses create-react-app
  22. Importing multiple files in react
  23. this.setState is not a function [duplicate]
  24. How do you import a javascript package from a cdn/script tag in React?
  25. Error: How to serialize data from getStaticProps : Next.js
  26. What do curly braces mean in JSX (React)?
  27. Update one of the objects in array, in an immutable way
  28. How to namespace es6 classes (for React components)
  29. React functional component default props vs default parameters
  30. import * as React from ‘react’; vs import React from ‘react’;

Leave a Comment