Unstyled version of User cards example

index.js

import React from "react";
import ReactDOM from "react-dom";
// This loads data from a file named 'data.json' in the same directory
import data from "./data";

// Store the array of user objects in a variable
const users = data.results; // [{user},{user}, ...]

// Component to represent a single User 'Card' (note: this is a function component so cannot use state)
function User(props) {
  return (
    <div>
      <img alt="Profile" src={props.image} />
      <h2>{props.name}</h2>
      <p>{props.quote}</p>
    </div>
  );
}

// Iterate across all elements (u) in the users array, producing a User component for each
// Data is passed into the components via props
const userList = users.map(u => (
  <User
    key={u.name.first}
    name={u.name.first}
    image={u.picture.medium}
    quote={u.quote}
  />
));

// Render all the User components in a 'grid' layout
ReactDOM.render(<div>{userList}</div>, document.getElementById("root"));