TypeError: Cannot read property 'map' of undefined Reactjs

Question

Newbie to React and I need help again - everything was fine untill i shifted the code from App.js to separate component - and b/c it is the stateless component, i am using props and map function to access the value and state from App.js but it is not happy -- help please

import React from 'react';

const Recipes = props => (
  <div>
    {props.recipes.map(recipe => (
        <div key={recipe.recipe_id}>
          <img src={recipe.image_url} alt={recipe.title} />
          <p>{recipe.title}</p>
        </div>
    ))}
    </div>
);

export default Recipes;

Special Character · Accepted Answer · 2019-03-26 23:00:13Z

2

This just means that you don't pass in recipes properly as a prop where you render <Recipes />. Either recipes is null or incorrectly formatted.

ex:

// App.js

import React from 'react';

const App = () => {
  const recipes = [{
    recipe_id: '<id>',
    image_url: '<some url>',
    title: 'Lé title'
  }];

  // recipes could be null/undefined or not even passed as a prop

  return (
    <Recipes recipes={recipes} />
  );
}
export default App;

answered Mar 26, 2019 at 23:00

Special Character

2,3614 gold badges27 silver badges35 bronze badges

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

5 Comments

Afrahsh Over a year ago

so state is an empty array of recipe. How am I passing it <Recipes recipes={this.state.recipes} />' so when i want to pass it to the components via props` is should have the access to the state in main component?? Isn't so? or did i get the concept wrong? @Brendon

Special Character Over a year ago

I think you understand the concept correctly but I am not sure exactly what is wrong. Can you post the parent component that you are rendering <Recipes /> in? I might be able to help more if I can see that.

Special Character Over a year ago

Here is a small code sandbox if you want to see how the state might work from the parent. codesandbox.io/s/vy8qx67207

Afrahsh Over a year ago

I added the codesandbox.io/s/38xy0642yq code for App.js and the recipes.js Thanks @Brandon

Special Character Over a year ago

In your code sandbox, the state in your component is recipe and not recipes. When you pass this.state.recipe, you are actually passing undefined. It should be this.state.recipes

Alexis Bell · Accepted Answer · 2019-03-26 23:02:34Z

1

So it's hard to know exactly what's happening without being able to see how you are passing down props, and exactly what data they contain. The error you are getting implies that you aren't actually sending the recipes array correctly.

I honestly never use stateless functions in react anymore, because PureComponent generally preforms better because of it's built in shouldComponentUpdate which prevents unnecessary re-renders. So here's how I would write that component:

import React, { PureComponent } from 'react';

class Recipes extends PureComonent {
  recipeList = () => {
    const recipes = this.props;
    const recipeArray = recipes.map((recipe) => {
      <div key={recipe.recipe_id}>
        <img src={recipe.image_url} alt={recipe.title} />
        <p>{recipe.title}</p>
      </div>
    });
    return recipeArray;
  }

  render () {
    return () {
      <div>
        {this.recipeList()}
      </div>
    }
  }
}

export default Recipes;

That being said, my guess about the way you wrote your component is that if you were to console out props you would find that it was actually equal to recipes, which is why recipes.recipes is undefined.

answered Mar 26, 2019 at 23:02

Alexis Bell

1511 silver badge10 bronze badges

1 Comment

Afrahsh Over a year ago

Exactly, so the props are giving me the array i need in console in the main component. But as soon as I separated it in the different component, which is stateless, which i can use the function method instead of class, i still shiuld be able to access the state from main via passing down the props as argument? Am i wrong somewhere in grabbing the concept?

Collectives™ on Stack Overflow

TypeError: Cannot read property 'map' of undefined Reactjs

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related