Help with react

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

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?

first spot in the array would recipes[0]

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

1 Like

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