How to render JSON data in reactjs?

This is my people.js file.It contains data of two people.

var Data = [
        {
            "gender": "male",
            "name": {
              "title": "mr",
              "first": "ruben",
              "last": "dean"
            },
            "location": {
              "street": "3070 york road",
              "postcode": "LP0 5PG"
            },
            "email": "[email protected]",
            "login": {
              "username": "crazydog764",
              "password": "kane",
              "sha256": "58841f853bffca51507549428aee2a6c14863c8219e5a4b563d58a5b97564c92"
            },
            "picture": {
              "large": "https://randomuser.me/api/portraits/men/96.jpg",
              "thumbnail": "https://randomuser.me/api/portraits/thumb/men/96.jpg"
            },
            "nat": "GB"
        },
        {
            "gender": "male",
            "name": {
              "title": "mr",
              "first": "daniel",
              "last": "king"
            },
            "location": {
              "street": "7618 taylor st",
              "postcode": 35059
            },
            "email": "[email protected]",
            "login": {
              "username": "silvergorilla983",
              "password": "1a2b3c4d",
              "sha256": "df4eeb09df18d02d7fa49534a2cd6a03587d361f17aa7596d8ed7c025c5cb4d4"
            },
            "picture": {
              "large": "https://randomuser.me/api/portraits/men/21.jpg",
              "thumbnail": "https://randomuser.me/api/portraits/thumb/men/21.jpg"
            },
            "nat": "US"
        }
    ]

    module.exports = Data;

This is my PeopleList.jsx. Both files are in the same directory.

var React = require('react');
var Data = require('people');

var PeopleList = React.createClass({
    render: function () {
        return (
            <div>
              <ul>

              </ul>
            </div>
        );
    }
});

module.exports = PeopleList;

Can anyone tell me how to render both names (Ruben and Daniel) from the people.js file into the screen (within the unordered list)? Please provide code.

Thanks in advance.

Solution

This should do it:

<ul>
    {Data.map(x => <li>{x.name.first}</li>)}
</ul>