Help with react

JavaScript
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

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?

1 Like
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