Cannot read property 'map' of undefined in React and API

Question

I am very new to react and I am trying to bring in data from a food2fork api but I am getting the error

TypeError: Cannot read property 'map' of undefined

if i undo this code, the error was none. this code is main place to occur error

  {recipes.map (recipe => {
    return <Recipe key={recipe.recipe_id} recipe={recipe}
    />;
  })}

Full Page of RecipeList.js

import React, { Component } from 'react';
import Recipe from './Recipe';
import RecipeSearch from './RecipeSearch';

export default class RecipeList extends Component {
    render() {
        const { recipes } = this.props;
        return (
            <React.Fragment>
                <RecipeSearch />
                <h1>Recipe List</h1>
                <div className="container my-5">
                    {/* title */}
                    <div className="row">
                        <div className="col-10 mx-auto col-md-6 text-center text-uppercase mb-3">
                            <h1 className="text-slanted">Recipe List</h1> 
                        </div>
                    </div>
                    {/* end title */}
                    <div className="row">
                        {recipes.map (recipe => {
                            return <Recipe key={recipe.recipe_id} recipe={recipe}
                            />;
                        })}
                    </div>
                </div>

                <Recipe />
            </React.Fragment>
        );
    }
}

In App.js:

render(){
    console.log(this.state.recipes);

    return (
      <React.Fragment>
        <RecipeList />
        <RecipeDetails />
      </React.Fragment>
    );
 }

this.props.recipes is undefined. Please add the script where you're importing RecipeList component. — Nicolas Hevia
– Nicolas Hevia, Commented Nov 2, 2019 at 20:48
i tried as u say change this.props To this.props.recipes , but it is still showing error — Zin Myo Swe
– Zin Myo Swe, Commented Nov 2, 2019 at 20:54
That changes makes no sense since you're already destructuring props. What I mean is to edit your post and add the part of your code that calls your component, like this <RecipeList .../> — Nicolas Hevia
– Nicolas Hevia, Commented Nov 2, 2019 at 20:57
can u add the code of the component that is using this component? — Atin Singh
– Atin Singh, Commented Nov 2, 2019 at 21:03
u mean App.js or other js files in component folder it is need to be add — Zin Myo Swe
– Zin Myo Swe, Commented Nov 2, 2019 at 21:06

Atin Singh · Accepted Answer · 2019-11-02 21:35:28Z

1

I am taking it that you are keeping the recipes data in this.state.recipes in App.js

You need to pass it as props to <RecipeList component to use it as props there.

So in your App.js just do this

render(){
  console.log(this.state.recipes);

  return (
    <React.Fragment>
      <RecipeList recipes={this.state.recipes}  />
      <RecipeDetails />
    </React.Fragment>
  );
}

answered Nov 2, 2019 at 21:35

Atin Singh

3,6902 gold badges21 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nicolas Hevia · Accepted Answer · 2019-11-02 21:37:46Z

1

First, you are not passing any prop to RecipeList.
Change this in App.js

 return (
      <React.Fragment>
        <RecipeList recipes={this.state.recipes} />
        <RecipeDetails />
      </React.Fragment>
    );

Second, in RecipeList.js, render it only when the async function completes.
Change:

{recipes.map (recipe => {
  return <Recipe key={recipe.recipe_id} recipe={recipe}
    />;
  })}

To:

{recipes ? recipes.map (recipe => {
  return <Recipe key={recipe.recipe_id} recipe={recipe}
    />;
  }) : null
}}

answered Nov 2, 2019 at 21:37

Nicolas Hevia

16k4 gold badges24 silver badges32 bronze badges

Collectives™ on Stack Overflow

Cannot read property 'map' of undefined in React and API

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related