7.5 - Github API Card List

We are going to create our last component, GithubCardList. The purpose for this component is to create a place for our cards to live. We will be getting a list of data from a source and divying them up to their individual cards.

Copy the code below:

import React from 'react';
import GithubCard from './GithubCard';

const GithubCardList = (props) => {
    return (
        <div className="main">
            <div className="mainDiv">
            <h1>Github Demo</h1>
                {props.cards.map(card => <GithubCard key={card.id} {...card} />)}
            </div>
        </div>
    )
}

export default GithubCardList;

The line of code to focus on in here is this one:

{props.cards.map(card => <GithubCard key={card.id} {...card} />)}

Here we have an array of data in our components prop.

To iterate over that array, we use the method called map(). Map creates a new array of data so not to mutate our current data structure.

Inside of that data we have an object of card that had a few properties, to access them, we are using the short hand syntax called the spread operator ... to unpack the properties in the object. That allows the username and the avatar_url to be accessed by our components.