How to map an array which is inside another array in react js?

Question

I am new to react and I am having trouble finding a way to map an array within an array to display the username and id in the component. How can I achieve this? Is this a wrong approach?

[Array(4)]
        0: Array(4)
            0: {user: "testuser1", id: "2"}
            1: {user: "testuser2", id: "3"}
            2: {user: "testuser3", id: "4"}
            3: {user: "testuser4", id: "5"}
    length: 4
    __proto__: Array(0)
    length: 1
    __proto__: Array(0)

Thanks

Have you read the documentation Lists and Keys? It will explain how to map your data to components, which you can then render. — Nick Parsons
– Nick Parsons, Commented Mar 14, 2021 at 11:31
Hi, I am able map normal arrays without any problem, but here I'm finding it difficult to get it work. userinfo is the state which holds this array. userinfo.0 throws an error. — prehistoricbeast
– prehistoricbeast, Commented Mar 14, 2021 at 11:35
It is the same idea, you'll just need one map to map the contents of the outer array, and then another to map the contents of the inner array arr.map(inner => inner.map(obj => <p key={obj.id}>{obj.user}</p>));. To access an element in an array, you could use userInfo[0], but it's unclear whether your (outer) array can have more than one nested array. Using two maps will take care of both cases (0 or more nested arrays) — Nick Parsons
– Nick Parsons, Commented Mar 14, 2021 at 11:38

Piotr Żak · Accepted Answer · 2021-03-14 11:41:00Z

2

prehistoricbeast - try this:

  return(
    <div>
      {Object.keys(data).map((key) => {
         return (
           <div key={key}>
              <h1>{key}</h1>
              {data[key].map((dataItem) => {
                return (
                 <span key={dataItem.user}>{dataItem.id}</span>
                )
               })}
           </div>
         )
       })}
     </div>
   )

answered Mar 14, 2021 at 11:41

Piotr Żak

2,1426 gold badges21 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to map an array which is inside another array in react js?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related