# 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:

```javascript
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:

```javascript
{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.