CODEWITHSUNDEEP
reactjsdictionarycomponents
Afrahsh
Afrahsh

Reputation: 61

TypeError: Cannot read property 'map' of undefined Reactjs

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;

Upvotes: 1

Views: 961

Answers (2)

Alexis Bell
Alexis Bell

Reputation: 151

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.

Upvotes: 1

Special Character
Special Character

Reputation: 2359

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;

Upvotes: 2

Related Questions