line 14 Expected an assignment or function call and instead saw an expression error-CodePudding

I'm am trying to map over seeded data, and I'm getting this error. Does anyone know why? Right now I am only trying to get the key of name to display, but I'm getting an expected an assignment or functionn error.

import { Link } from "react-router-dom";
import {getData} from "../Data"


export default function Home() {
    let data = getData();
    return (
       <div>
        {data.map((data) => {
            {data.name}
        })}
       </div>
    )
}

This is my seed data that I am trying to pull from. I have imported it in my home.jsx file and called the function before my return statement.

let data =  [
    {
        name: 'forgive-me-pleases',
        image: 'https://i.imgur.com/0UCzcZM.jpg',
        price: 50,
        tags: ['pink', 'roses', 'bouquet', 'apologies'],
    },
    {
        name: 'pink perfection',
        image: 'https://i.imgur.com/XoEClf7.png',
        price: 15,
        tags: ['pink', 'gerbera daisy', 'singular', 'decor'],
    },
    {
        name: 'hopeful sunshine',
        image: 'https://i.imgur.com/LRrcBtN.png',
        price: 30,
        tags: ['yellow', 'sunflower', 'multiple', 'garden'],
    },
    {
        name: 'motivational mug',
        image: 'https://i.imgur.com/NOJ2ikN.png',
        price: 25,
        tags: ['yellow', 'gerbera daisy', 'singular (with mug)'],
    },
    {
        name: 'breathtaking bouquet',
        image: 'https://i.imgur.com/TuuKiHt.png',
        price: 40,
        tags: ['white', "baby's breath", 'bouquet', 'decor'],
    },
    {
        name: 'loves-me-loves-me-knots',
        image: 'https://i.imgur.com/SaTbTEx.png',
        price: 20,
        tags: ['mixed', 'gerbera daisy', 'mini bouguet', 'for fun'],
    },
    {
        name: 'hiya, spring',
        image: 'https://i.imgur.com/dJvHolr.jpg',
        price: 35,
        tags: ['mixed', 'hyacinths', 'bouquet', 'garden'],
    },
    {
        name: 'can of compassion',
        image: 'https://i.imgur.com/PN3jmrf.png',
        price: 55,
        tags: ['mixed', 'decor', 'bouquet (with can)', 'love'],
    },
    {
        name: 'basket of beauty',
        image: 'https://i.imgur.com/Z86X3qq.png',
        price: 50,
        tags: ['mixed', 'bouquet (with basket)', 'love', 'decor'],
    },
];

export function getData() {
    return data
}

CodePudding user response：

Try changing {data.name} to return data.name as Array.map() expects you to return a value.

CodePudding user response：

Please change your code like below

 let data = getData();
    return (
       <div>
        {data.map((data) => {
           <div>{data.name}</div>
        })}
       </div>
    )