> For the complete documentation index, see [llms.txt](https://ga0-2.gitbook.io/seifxr10anz-content/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ga0-2.gitbook.io/seifxr10anz-content/week-19/day-2-rendering-lists-conditional-rendering/rendering-lists.md).
# Rendering Lists
Rendering an array of objects is a very common pattern.
Consider this array of dogs
```javascript
const goodest = [
{ name: 'Tonto' },
{ name: 'Sailor' },
{ name: 'Scout' },
{ name: 'Odin' },
{ name: 'Poppy' },
{ name: 'Peggy' }
];
```
and this Component to render a single dog.
```jsx
const Doggo = ({ dog }) => {
return {dog.name}
;
};
```
You can manually render each component like so
```jsx
```
or you can loop/map over the `goodest` array and render as many `Doggo` components as needed.
```jsx
const DoggoList = goodest.map((dog) => );
```
JSX knows how to render an array so you can just output `DoggoList` (an array of `Doggo` components) by putting the variable name in between curly braces:
```jsx
{DoggoList}
```
Alternatively (and more commonly), you could render the result of the `.map` operation inline
```jsx
{goodest.map((dog) => )}
```
#### The `key` Prop
If you open the Dev Tools console, you will find a warning
When you render an array of components, React expects each component in that array to have a `key` prop so that it can keep track of each component internally.
Add a `key` prop to each `Doggo` you want to render. Most datasets will have a unique id for each item, `goodest` doesn't so just use the name property instead.
```jsx
{goodest.map((dog) => )}
```
You should now see `key`s for each `Doggo` component in the React Dev Tools
