解析错误：“，”预期。 具有数组映射功能

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;

Answer 1

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>
        ))}
    </>
)

Answer 2

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>
  )
    
  }