ReactJs Render Value (Array of Objects) of Object

Question

{
    "pendingShareholder": [
        [{
                "id": 5351,
                "userName": "iverson",
                "firstName": "Allen",
                "lastName": "Iverson",
                "password": "$2a$10$20ILdapdX6u8G1nH2jIr6upiKY04LCxD9yjHKUHRhUfpuG1w1ywd2",
                "contact": "97801671",
                "email": "[email protected]",
                "roles": [{
                    "id": 3,
                    "name": "ROLE_SHAREHOLDER"
                }]
            },
            {
                "id": 5951,
                "userName": "rosgeller",
                "firstName": "Ros",
                "lastName": "Geller",
                "password": "$2a$10$Udrju2Tj6mKGJRZA3d2GFer6kfSI988xI1/R50s.XmrHcIN1IJxoO",
                "contact": "90908899",
                "email": "[email protected]",
                "roles": [{
                    "id": 3,
                    "name": "ROLE_SHAREHOLDER"
                }]
            }
        ]
    ]
}

Hi all

I have the above object. As you can see it is an object, with one key ("pendingShareholder"). The value of this key is an array inside an array (with objects inside).

I need to return this out in ReactJS. Using React Hooks here. I can't seem to do it no matter what :( Can anyone help me. I am going nuts here

Thanks in advance!

const adminStateObject = useSelector((state) => state.admin11111);`

return (
    <div className="adminmaincontent">
      <h2>Pending Approval Users</h2>
      <Table striped bordered hover size="sm" responsive>
        <thead>
          <tr>
            <th>ID</th>
            <th>UserName</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Contact</th>
            <th>Email</th>
            <th>Action</th>
          </tr>
        </thead>
        {Object.keys(adminStateObject).map((key, i) => (
          <tbody key={uuid()}>
            {adminStateObject[key].map((key2, i2) => (
              <tr key={uuid()}>
                <td key={uuid()}>{key2.id}</td>
                <td key={uuid()}>{key2.userName}</td>
                <td key={uuid()}>{key2.firstName}</td>
                <td key={uuid()}>{key2.lastName}</td>
                <td key={uuid()}>{key2.contact}</td>
                <td key={uuid()}>{key2.email}</td>
              </tr>
            ))}
          </tbody>
        ))}
      </Table>
    </div>
  );

is using uuid() to generate a key is good idea? it will create a new key on every render which defeats the entire purpose of using keys. — Gulam Hussain
– Gulam Hussain, Commented Jul 2, 2021 at 7:31

Andy · Accepted Answer · 2021-07-02 09:14:51Z

1

It looks like you have too many map operations going on. You need one that iterates over your nested array.

And as Gulam mentions in their comment using uuid on every tbody, tr, and td is overkill. Just add the object id as the row key.

function Example({ data }) {
  return (
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>UserName</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Contact</th>
          <th>Email</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        {data.pendingShareholder[0].map(obj => (
          <tr key={obj.id}>
            <td>{obj.id}</td>
            <td>{obj.userName}</td>
            <td>{obj.firstName}</td>
            <td>{obj.lastName}</td>
            <td>{obj.contact}</td>
            <td>{obj.email}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

const data = {pendingShareholder:[[{id:5351,userName:"iverson",firstName:"Allen",lastName:"Iverson",password:"$2a$10$20ILdapdX6u8G1nH2jIr6upiKY04LCxD9yjHKUHRhUfpuG1w1ywd2",contact:"97801671",email:"[email protected]",roles:[{id:3,name:"ROLE_SHAREHOLDER"}]},{id:5951,userName:"rosgeller",firstName:"Ros",lastName:"Geller",password:"$2a$10$Udrju2Tj6mKGJRZA3d2GFer6kfSI988xI1/R50s.XmrHcIN1IJxoO",contact:"90908899",email:"[email protected]",roles:[{id:3,name:"ROLE_SHAREHOLDER"}]}]]};

// Render it
ReactDOM.render(
  <Example data={data} />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

edited Jul 2, 2021 at 9:14

answered Jul 2, 2021 at 7:27

Andy

63.6k13 gold badges72 silver badges99 bronze badges

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

5 Comments

Ewan Sou Over a year ago

Thanks for the help! It seems to be working. I can see two rows now, which equats to the two users. BUT... I can't see the id, userName, firstName etc. It is just blank... Any idea why is this happening? Could it be because I am actually having an array of 2 objects inside a single array?

Ewan Sou Over a year ago

An update. With Andy's answer, when I try to render out {obj} it gives me the index of the array... Basically, 0 and 1... so it seem like another round of mapping is needed?

Andy Over a year ago

I got the key wrong which might have caused the whole thing to not render. I've updated my answer with a working example. I hope that helps.

Ewan Sou Over a year ago

many thanks for the help! you are a life save. Perfect answer! Thank you Gulam for the advise too :) I am a beginner and still learning. Cheers!

Andy Over a year ago

I've been at this 20 years, Ewan. We're always learning. Glad to help.

Collectives™ on Stack Overflow

ReactJs Render Value (Array of Objects) of Object

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related