This is the curriculum for the 2018 Foxtrot Web Developer Bootcamp.

The map method is a powerful tool in React for rendering one component per item in an array. A common pattern has emerged for using the map method on arrays in react to generate lists of components.

Intro the React Map Pattern

Part 1

Imagine the scenario where our app has a JSON array of recipes. We need to display these recipes on the page, so we might have code that looks like this:


class Recipes extends Component {
  constructor(props) {
    super(props)

    this.state = {
      recipes: [
        {
            id: 1,
            name: 'Mac & cheese'
        },
        {
             id: 2,
             name: 'Tofu Burger'
        }
      ]
    }
  }

  render() {
    // destructure recipes out of state
    let { recipes } = this.state
    return(
        <ul>
            <li>{recipes[0].name}</li>
            <li>{recipes[1].name}</li>
        </ul>
    )
  }
}

The code above is functional, both recipe names would appear on the page as list items, but lets consider the use of this code beyond our two examples.
What would happen if we ever had more than 2 recipes - would the code work? What if we had fewer than 2 recipes?

This code would not be useful if we had any more or less than 2 recipes. Which is not good.

How could we make this code more robust? More re-useable?

Part 2

We want to be able to show the name for every recipe in the recipes list - no matter how long or short the array happens to be.

If we want to do one action ON EVERY item in a list, we are accustomed to using a FOR loop, or perhaps the forEach or map array methods. And that is precisely what we want to do here as well. But how can we use one of these iterative functions inside of a react component?

First, lets just set up a map method to iterate over the array in state

this.state.recipes.map((recipe, index) => {
  console.log(recipe, index)
})

Here we are using an arrow function as our argument to the map method. All we are doing is printing back each recipe object and that object`s index in the recipes array in state.

Part 3

We have a map method, but how do we integrate that with our view?

Turns out that the map function accumulates the outcome of each loop into a new array. We can use this to our advantage by having each loop return a chunk of JSX.

let recipesList = this.state.recipes.map((recipe, index) => {
  console.log(recipe, index)
  return(
     <li>{recipe.name}</li>
  )
})

Now we are accumulating one li element per list item into a variable called recipesList

React Review

Build a Single Page Recipe Website

Build a recipes website with React. The site should have:

  • a header
  • some welcome/introductory text at the top
  • multiple recipes showing on the page
  • a footer
  • should use at least 3 different components
  • recipes should be in app.js state

Example of App component state object:

this.state = {
  recipes: [
    {
        id: 1,
        name: 'Mac & cheese'
    },
    {
         id: 2,
         name: 'Tofu Burger'
    }
  ]
}

** FOR MORE CHALLENGE ** Use this more complex state object. How would you handle displaying individual ingredients?

this.state = {
  recipes: [
    {
        id: 1,
        name: 'Mac & cheese',
        ingredients: ['noodles', 'cheddar']

    },
    {
         id: 2,
         name: 'Tofu Burger',
         ingredients: ['ground tofu', 'lettuce', 'tomato', 'feta']
    },
    {
         id: 3,
         name: 'Chicken Parmesan',
         ingredients: ['chicken breast', 'parmesan', 'bread crumbs', 'garlic']
    }
  ]
}

Today's Tentative Schedule

9:15am - Stand Up

9:30am - Introduction to SQL: Simple queries, Create, Read, Update and Delete

11:00am - Challenge: Making queries to Databases

12:00 noon - Lunch

1:00pm - continue making queries to Databases challenges

4.30pm - Review

5:00pm - Class Ends