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.) 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
– T.J. Crowder, Commented Oct 6, 2017 at 9:18
@Steve can you give us same object that you use in your code? — Andrzej Smyk
– Andrzej Smyk, Commented Oct 6, 2017 at 9:34

Shubham Khatri · Accepted Answer · 2017-10-06 10:15:39Z

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

Andrzej Smyk · Accepted Answer · 2017-10-06 09:21:19Z

1

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

answered Oct 6, 2017 at 9:21

Andrzej Smyk

1,72411 silver badges21 bronze badges

Collectives™ on Stack Overflow

React render array keys and objects

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related