Mapping in React
Published: 2022-10-06 14:13:05

Something I've learned recently is how to map in React. Below I'll walk through one example of how to set up mapping in a React app. 

####1. Set up your parent component
Identify the component that should contain the data you fetch. This will likely be a parent component – make sure to think about which child components need access to the data! You'll be passing the data to those components as props. 

In this example, we'll pull a list of resources (the data), map the data, create cards for each resource, and then pass the data to a separate component as props to format the cards. The parent component is called `ResourceList` and the child is `ResourceCard`. 

```
import React, {useState, useEffect} from "react";
import ResourceCard from "./ResourceCard";

function ResourceList() {
  const [resources, setResources] = useState([])

  useEffect(() => {
    fetch('http://localhost:3000/resources')
    .then((r) => r.json())
    .then((resources) => setResources(resources))
    }, [])

  const resourceList = resources.map((resource) => {
    return (
      <ResourceCard
      key={resource.id}
      name={resource.name}
      url={resource.url}
      summary={resource.summary}
      image={resource.image}
        />
    ) })
  
  return (
    <div>
      <h2>Resources</h2>
      <ul>
        {resourceList}
      </ul>
    </div>
  )
}

export default ResourceList;


```
Let's break down that code. 

First, we import React, useState, and useEffect from "react". We also import our `ResourceCard` since we need to include it in our `ResourceList` return. 

Then, we set up our `ResourceList` function. Within that, we start with creating state for our data – using an empty array so the data we fetch has somewhere to go! 

Next is our useEffect function. We pull our data from `/resources`, convert it to json, and then set our resources. We include an empty array at the end of the function so that this fetch only happens once, when the page loads. 

Now we get to map our data! We put it in a new variable (`resourceList`) and set it equal to our mapping method. Note that this `resourceList` is different than our `ResourceList`. While they have almost the exact same name, components in React start with capital letters and variables use camelcase (at least as a best practice!). What we're saying with this method is: create a `ResourceCard` for every `resource` in the `resources` list. 

We've also made sure to include the parameters we'll need to pass down to `ResourceCard` (key, name, url, summary, image). This can also be accomplished by using a spread operator, but I like writing it all out because it's easier for my brain to see all of the parameters listed individually. 

Below our mapping function we set up our return for `ResourceList`. We wrap everything in one `<div>`, then within that `<div>` we set up `<h2>` and `<ul>` elements. The `<h2>` will hold our title and the `<ul>` will contain our {resourceList} (the bit we just mapped above!). 

Finally, we write `export default ResourceList` so our App.js can import it! 

####2. Set up your child component

In this instance, our child component is pretty simple! We just have to set up the JSX for our `ResourceCard`. 

```
import React from 'react';

function ResourceCard({summary, name, url, image}) {
    return (
        <div>
            <img src={image}/>
            <h2>{name}</h2>
            <p>{summary}</p>
            <a href={url} target="_blank">Read more!</a>
        </div>
    )
}

export default ResourceCard;

```

We'll break the code of this component down as well: 

We start off by importing React from 'react', of course. 

Then, we set up our `ResourceCard` function. This function won't work if we don't accept the parameters being passed down from `ResourceList`. By including {summary, name, url, image} in this function, we are facilitating the data flow between the parent and child components. 

The `ResourceCard` return sets up how we want our mapped data displayed. Again, we set up a `<div>` to contain everything. Within that `<div>`, we create elements for our {image}, {name}, {summary}, and {url} data points. 

Finally, we write `export default ResourceCard` so that `ResourceList` can import it. Our data is now mapped and rendering on individual cards for each `resource`.

Hopefully this was a helpful overview of mapping data and passing it between components! One note – I removed all `className` references so that this example was easier to read, but of course I'd recommend styling your cards once they're mapped. It's half the fun – at least for me!