Skip to content

Instantly share code, notes, and snippets.

@aerrity

aerrity/index.js

Created December 12, 2018 23:49
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save aerrity/2844a31192268100485eede6bea4a7b6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save aerrity/2844a31192268100485eede6bea4a7b6 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. aerrity created this gist Dec 12, 2018.
    32 changes: 32 additions & 0 deletions index.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,32 @@
    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"));