react component nested array of objects

Question

I am new to react and I am having some trouble mapping nested array of objects in my app as it comes as undefined.

This is my api response which is an array of recipes.

const recipeMock = [
{
    "ingredientsInfo": [
        {
            "ingredientId": {
                "_id": "609e1325f5bbf3301d24102c",
                "name": "spaghetti squash",
            },
            "gramsPerIngredient": 301
        },
        {
            "ingredientId": {
                "_id": "609e1325f5bbf3301d24102b",
                "name": "spaghetti squash",
            },
            "gramsPerIngredient": 47
        },
    ],
    "_id": "609e1326f5bbf3301d241242",
    "name": "pain de mie",
    "gramsPerRecipe": 223,
    "elabTime": 20,
    "carbs": 201,
    "proteins": 10,
    "calories": 605,
        "instructions": "hi",
        "picture": "https://unsplash.com/photos/ijlUGGnrZsI",
    },{...other recipes following same structure
}]

I have created a component which paints each recipe that is the following:

export default function RecipeCard({
  recipeId,
  recipeName,
  ingredientsInfo,
  elabTime,
  carbs,
  proteins,
  calories,
  instructions,
  picture,
  addRecipeToUser,
})

which in return renders a card. But trouble comes when mapping ingredientsInfo as follows:

   <div className="recipeCard_ingredients">
    <ul className="recipeCard_ingredients_list">
      {ingredientsInfo.map((ingredient, index) => (
        <li key={index}>
          <Link to={`/ingredients/${ingredient.ingredientId.name}`}>
            {ingredient.ingredientId.name}
          </Link>
          <p>{ingredient.gramsPerIngredient} grams</p>
        </li>
      ))}
    </ul>
  </div>

The console tells me "Cannot read property 'map' of undefined".

can you show where do you fetch the data and how do you store it ? This is probably due to asychronous api call — İlker
– İlker, Commented May 15, 2021 at 20:33
Could be many reasons.. impossible to tell unless you show a more complete code example. — super
– super, Commented May 15, 2021 at 20:34

Rashed Rahat · Accepted Answer · 2021-05-15 20:50:28Z

1

The error Cannot read property 'map' of undefined will be encountered if there is an error in the ingredientsInfo or ingredientsInfo there is no array.

Better put condition to check the the array like:

<div className="recipeCard_ingredients">
<ul className="recipeCard_ingredients_list">
  {ingredientsInfo && ingredientsInfo.map((ingredient, index) => (
    <li key={index}>
      <Link to={`/ingredients/${ingredient.ingredientId.name}`}>
        {ingredient.ingredientId.name}
      </Link>
      <p>{ingredient.gramsPerIngredient} grams</p>
    </li>
  ))}
</ul>
</div>

edited May 15, 2021 at 20:50

answered May 15, 2021 at 20:44

Rashed Rahat

2,5152 gold badges25 silver badges45 bronze badges

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

1 Comment

Isabel GM Over a year ago

Thanks, it worked fine although ingredientsInfo will always be populated so i dont really know why it turns undefined, maybe it tries to map it before initialization. Anyway, thanks a lot, that was just the right approach.

Bhojendra Rauniyar · Accepted Answer · 2021-05-15 20:53:24Z

0

Based on the error, and the mock, you have used:

<RecipeCard {...recipeMock} />

Instead of:

<RecipeCard {...recipeMock[0]} />

If you insist to use without index then make sure to map it first and then only map ingredientsInfo inside of it.

edited May 15, 2021 at 20:53

answered May 15, 2021 at 20:48

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

Comments

msalla · Accepted Answer · 2021-05-15 21:53:49Z

0

Firstly, the RecipeCard function mustn't receive the recipeMock object as its parameters. In React, function parameters are used to pass props from other components.

Secondly, you have to map over recipeMock before you can access ingredientsInfo, since both are arrays. This means you have to nest two map functions like so:

const recipeMock = [
  {
    ingredientsInfo: [
      {
        ingredientId: {
          _id: "609e1325f5bbf3301d24102c",
          name: "spaghetti squash"
        },
        gramsPerIngredient: 301
      },
      {
        ingredientId: {
          _id: "609e1325f5bbf3301d24102b",
          name: "spaghetti squash"
        },
        gramsPerIngredient: 47
      }
    ],
    _id: "609e1326f5bbf3301d241242",
  }
];

const RecipeCard = () => {
  return recipeMock.map(({ ingredientsInfo, _id }) => (
    <div key={_id}>
      {ingredientsInfo.map(
        ({ gramsPerIngredient, ingredientId: { _id, name } }) => (
          <p key={_id}>
            {gramsPerIngredient}, {name}
          </p>
        )
      )}
    </div>
  ));
};

Here's a working demo in CodeSandbox.

edited May 15, 2021 at 21:53

answered May 15, 2021 at 21:46

msalla

7651 gold badge7 silver badges28 bronze badges

1 Comment

Isabel GM Over a year ago

Thanks! yes, I mapped recipesMock and ingredients, but just ingredientsInfo was returning undefined, so I just added this part to the question, thanks! I solved it following above answer.

Collectives™ on Stack Overflow

react component nested array of objects

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related