.map is suddenly not a function?!

JavaScript
1

The console says that this.props.ingredients.map is not a function. I know this error is pretty common, but I’m a beginner with react and not totally sure what’s going on. I feel like I did the right things to make my updateStatefulRecipes method work.

Here is my code:

import React from 'react'
import ReactDOM from 'react-dom'
import ReactBootstrap from 'react-bootstrap'
import { ListGroup } from 'react-bootstrap'
import { ListGroupItem } from 'react-bootstrap'
import { Panel } from 'react-bootstrap'
import { ButtonGroup } from 'react-bootstrap'
import { Button } from 'react-bootstrap'
import { Modal } from 'react-bootstrap'



const recipes = [
        {
        "name" : "Baklava",
        "ingredients": ["Flower", "Baking soda", "Pistachios", "Honey", "Puff Pastry", "Love", "Wawa"],
        "image" : "http://assets.simplyrecipes.com/wp-content/forum/uploads/2008/02/baklava-horiz-a-640.jpg"
        },
        {
        "name" : "Chips N' Dip",
        "ingredients": ["Chips", "Dip"],
        "image" : "http://dinnerthendessert.com/wp-content/forum/uploads/2015/09/Chips-and-Guac-Small-680x453.jpg"
        }
];
3

What this error means is that this.props.ingredients is not of a type that has a map function.

4

As said we can’t really tell (what this.props is) but for .ingredients to work, it would have to be on one of the objects inside the recipes array, not on recipes.

const recipes = [
  {
  "name" : "Baklava",
  "ingredients": ["Flower", "Baking soda", "Pistachios", "Honey", "Puff Pastry", "Love", "Wawa"],
  "image" : "http://assets.simplyrecipes.com/wp-content/forum/uploads/2008/02/baklava-horiz-a-640.jpg"
  },
  {
  "name" : "Chips N' Dip",
  "ingredients": ["Chips", "Dip"],
  "image" : "http://dinnerthendessert.com/wp-content/forum/uploads/2015/09/Chips-and-Guac-Small-680x453.jpg"
  }
];

/* would work */
recipes[0].ingredients.map( item => console.log(item));

/* would not work */
recipes.ingredients.map( item => console.log(item));

This might be obvious but I just wanted to point it out anyway.