Render object arrays in react function

Question

Forgive me, I'm a react noob. I'm trying to access the data inside a javascript/react object. The json data looks like this:

"schoolData": {
      "student": [
        {
          "name": "blah",
          "type": "lorem",
          "grade": 90,
        }
      ],
      "class": null
    },

What I'm trying to display is essentially just like this...

Student
name: Blah      type: lorem      grade:   90
Class
--- no data here ---

So I'm trying like this:

import React, { PropTypes } from 'react';


const SchoolDataPropTypes = {
  SchoolData: PropTypes.object.isRequired,
};

function School(props) {

    return (
    <div className="section">
        <h3 className="head">School Data</h3>
        <div className="row">

            <ul className="Uli">
                {(props.data || []).map(function(value) {
                    return <label>{props.data.key}</label><li key={value}>{key}: {value}</li>
                })}
            </ul>
        </div>
    </div>
  );
}
School.propTypes = SchoolPropTypes;

export default School;

It obviously doesn't work. So that I can render each array inside the object?

Austin Greco · Accepted Answer · 2016-05-05 21:08:52Z

1

Ideally, you would manually specify each key.

{(schoolData.student || []).map(student => (
  <ul className="Uli">
    <li>Name: {student.name}</li>
    <li>Grade: {student.grade}</li>
  </ul>
))}

etc...

But if you really want to loop through variable keys in the student object then basically you need to loop through the student array, and then loop through the keys in each student object. Here's what it might look like:

const School = ({ schoolData }) => (
  <div className="section">
    <h3 className="head">School Data</h3>
    <div className="row">
      {(schoolData.student || []).map(student => (
        <ul className="Uli">
          {Object.keys(student).map(key => (
            <li key={key}>{key}: {student[key]}</li>
          ))}
        </ul>
      ))}
    </div>
  </div>
);

-

<School schoolData={schoolData} />

If you're targeting very, very old browsers you may need a polyfill for Object.keys

edited May 5, 2016 at 21:08

answered May 5, 2016 at 21:03

Austin Greco

33.6k6 gold badges60 silver badges61 bronze badges

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

2 Comments

Modelesq Over a year ago

Looks like your first suggestion worked. I'll work on making it better with your second. Thank you! :D

wintvelt Over a year ago

It is worth pointing out that looping over the keys of an object, gives you the keys in RANDOM ORDER, and not necessarily in the order in which you put them in json/ object.

Collectives™ on Stack Overflow

Render object arrays in react function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related