Help with react

Help with react
0

#1

Still getting headaches with react . Basically I have an array of default props, ingredients, directions, and title. Right now im just trying to render the ingredients… Here is what I have

class RecipeList extends React.Component  {
  static defaultProps = {
    recipes: [
      {
        title: "Spaghetti",
        instructions: "Open jar of Spaghetti sauce.  Bring to simmer.  Boil water.  Cook pasta until done.  Combine pasta and sauce",
        ingredients: ["pasta", "8 cups water", "1 box spaghetti"],
        
      }]
  }
render() {
  const items = this.props.ingredients.map((items) => <li>{items}</li>);
    return (
     <div>
          <h4>Ingredients:</h4>
          <ul>
            {items}
          </ul>
          
      </div>
    );
  }
}

ReactDOM.render(<RecipeList />, document.getElementById('app'));

Do I need to go through recipes first? I get error can not read property map of undefined


#2

The React code is not the problem. The problem is you have forgotten how to reference elements in an array.

There is no prop names ingredients. You do have a prop named recipes which is an array with a single element. That single element is an object which does have an ingredients array.

const items = this.props.ingredients.map((items) => <li>{items}</li>);

How do you reference the first element of the recipes array?


#3

first spot in the array would recipes[0]


#4

Correct, recipes[0] is an object, so how would you reference an property named ingredients on that object?


#5

So, it would be

  const items = this.props.recipes[0].ingredients.map((items) => <li>{items}</li>);

May have to go back through the data structure lessons. So easy to forget right now