React render array keys and objects

Question

I have a json-object with multiple arrays inside. These arrays have objects inside which I would like to render in a react-view. Each array has its own key. I did manage to get the Keys of the array displayed but not the objects inside the arrays. This is what I got so far:

const Albums = observer(({ state, releases }) => (

  <div className="wrapper">

    { Object.keys(state.releases).map((key, i) => { 
        return <div key={key}><p>{key}</p></div>
            state.releases[key].forEach((album) => {
                return <div album={album}><p>{album}</p></div>;
            })
        })  
    }  
  </div>
))

What am I missing/doing wrong here?

** UPDATE **

JSON looks somethinglike this:

[{
    "Key" : [
        {"id" : "1", "blabla" : "balabla"},
        {"id" : "2", "blabla" : "balabla"},
        {"id" : "3", "blabla" : "balabla"}
    ],
    "Another Key" : [
        {"id" : "4", "blabla" : "balabla"},
        {"id" : "5", "blabla" : "balabla"},
        {"id" : "6", "blabla" : "balabla"}
     ]
 }]

*"I have a json-object with multiple arrays inside"* JSON is a *textual notation* for data exchange. [(More here.)](http://stackoverflow.com/a/2904181/157247) If you're dealing with JavaScript source code, and not dealing with a *string*, you're not dealing with JSON. I'm guessing you're just dealing with an object containing arrays. — T.J. Crowder, Oct 06 '17 at 09:18
@Steve can you give us same object that you use in your code? — Andrzej Smyk, Oct 06 '17 at 09:34

Shubham Khatri · Accepted Answer · 2017-10-06T10:15:39.353

The problem is you are trying to return multiple components which is not correct if you are using React version less than v16.0.0, you either should wrap multiple components that are returned in a div or use a JSX syntactic sugar. Also use map instead of forEach to return the elements

Methods 1: Wrapping

const Albums = observer(({ state, releases }) => (

  <div className="wrapper">

    { Object.keys(state.releases).map((key, i) => { 
        return <div>
          <div key={key}><p>{key}</p></div>
            {state.releases[key].map((album) => {
                  return <div album={album}><p>{album}</p></div>;
            })}
           </div>
        })  
    }  
  </div>
))

Methods 2: JSX Sugar

const Albums = observer(({ state, releases }) => (

  <div className="wrapper">

    { Object.keys(state.releases).map((key, i) => { 
        return [<div key={key}><p>{key}</p></div>,   // returning comma separated array here
            {state.releases[key].forEach((album) => {
                return <div album={album}><p>{album}</p></div>;
            })
            ]
        })  
    }  
  </div>
))

score 1 · Answer 2 · answered Oct 06 '17 at 09:21

Use map instead of forEach which return undefined:

const Albums = observer(({ state, releases }) => (
  <div className="wrapper">
    {Object.keys(state.releases).map((key, i) => (
      <div key={key}>
        <p>{key}</p>
      </div>
      {state.releases[key].map((album) => (
        <div album={album}><p>{album}</p></div>
      )}
    )}  
  </div>
));

React render array keys and objects

2 Answers2