Parsing error: ',' expected. with array map function

Question

this is very simple react code, but I cannot figure out why it's so mad at me for trying to do a map. I double check the closing brackets and that the key matches and I've tried adding semi colon all over and nothing happened, the error is "Parsing error: ',' expected." on my recipes object but everything checks out. Thanks for any help!

import React from "react";

const RecipeCard = () => {
  const recipes = [
    {
      id: "recipe-id-1",
      name: "Tomato Soup",
      description: "Love red soup 😎",
      ingredient: [
        { name: "tomato", measurement: 3, unit: "cup" },
        { name: "water", measurement: 3, unit: "cup" },
      ]
    },
    {
      id: "recipe-id-2",
      name: "Potato Soup",
      description: "Love potato soup 😎",
      ingredient: [
        { name: "potato", measurement: 3, unit: "cup" },
        { name: "water", measurement: 3, unit: "cup" },
      ]
    }
  ];
  return (
    {recipes.map((recipe) => (
    <div className="recipeCard">
      <h2>{recipe.name}</h2>
      <p>{recipe.description}</p>
      <ul>
        {recipe.ingredient.map((ingredient) => (
          <li>
            {ingredient.name} - {ingredient.measurement}
            {ingredient.unit}
          </li>
        ))}
      </ul>
    </div>
    ))}
    )
  }

export default RecipeCard;

Sachila Ranawaka · Accepted Answer · 2022-12-24 06:55:13Z

2

you need to group the content. use </> fragment

return (
    <>
     {recipes.map((recipe) => (
        <div className="recipeCard">
          <h2>{recipe.name}</h2>
          <p>{recipe.description}</p>
          <ul>
            {recipe.ingredient.map((ingredient) => (
              <li>
                {ingredient.name} - {ingredient.measurement}
                {ingredient.unit}
              </li>
            ))}
          </ul>
        </div>
        ))}
    </>
)

answered Dec 24, 2022 at 6:55

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

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

1 Comment

Ikura Over a year ago

Yep that was it, thank you! I had tried that but I think I was missing a parenthese so it wasn't working at the time but cleaned stuff for the sake of this question and forgot to try fragment. Also doing the closing fragment with nodemon or something was weird in vscode it like kept adding the "</>" forever in my file(it was super weird to see it type itself). I had to stop all my server otherwise it kept adding the closing tag

John House · Accepted Answer · 2022-12-24 07:07:47Z

Do not use default export and wrap the output in a div:

import React from "react";

export const RecipeCard = () => {
  const recipes = [
    {
      id: "recipe-id-1",
      name: "Tomato Soup",
      description: "Love red soup 😎",
      ingredient: [
        { name: "tomato", measurement: 3, unit: "cup" },
        { name: "water", measurement: 3, unit: "cup" },
      ]
    },
    {
      id: "recipe-id-2",
      name: "Potato Soup",
      description: "Love potato soup 😎",
      ingredient: [
        { name: "potato", measurement: 3, unit: "cup" },
        { name: "water", measurement: 3, unit: "cup" },
      ]
    }
  ];

  return (
      <div>
        {recipes.map((recipe) => (
      <div className="recipeCard">
        <h2>{recipe.name}</h2>
        <p>{recipe.description}</p>
        <ul>
          {recipe.ingredient.map((ingredient) => (
            <li>
              {ingredient.name} - {ingredient.measurement}
              {ingredient.unit}
            </li>
          ))}
        </ul>
      </div>
      ))}
      </div>
  )
    
  }

Collectives™ on Stack Overflow

Parsing error: ',' expected. with array map function

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related