How can I fix this problem while mapping in a card?-CodePudding

import * as React from 'react';
import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';


export default function MediaCard() {
  return (
    
    <Card sx={{ maxWidth: 345 }}>
      {data.map((item) =>( 
      <CardMedia component="img"  height="140"  image={`${data.img}`} alt="home image looding......"/>
      <CardContent>
        <Typography gutterBottom variant="h5" component="div">{data.name}</Typography>
        <Typography variant="body2" color="text.secondary">{data.description}</Typography>
      </CardContent>
      ))}
      <CardActions>
        <Button size="small">Share</Button>
        <Button size="small">Learn More</Button>
      </CardActions>
    </Card>

  );
}


let data =[
  {
    name:'Property for sale',
    img: '/home1.jpg',
    description: 'This House is 5.5 cent with square feet area of 2000 and 3 km from palakkad city ;100 meters from main road.',
  },
  {
    name:'Property for Rent',
    img: '/home2.jpg',
     title: 'Burger',
  },
  {
    name:'Property for sale',
    img: '/home3.jpg',
    title: 'Camera',
  },
  {
    name:'Property for Rent',
    img: '/home4.jpg',
    title: 'Coffee',
  },
  {
    name:'Property for sale',
    img: '/home5.jpg',
    title: 'Hats',
  },
  {
    name:'Property for Rent',
    img: '/home7.jpg',
    title: 'Honey',
  },
];

I can't get the details of mapped items in the card. While doing this I had found an error

"ERROR in src\Components\Card\Card.js
  Line 17:6:  Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (17:6)."

I had used material UI and I don't understand whether the mistake had happened.

CodePudding user response：

It should be wrapped in a parent element. e.g

export default function MediaCard() {
  return (
    
  <div>
    <Card sx={{ maxWidth: 345 }}>
      {data.map((item) =>( 
      <CardMedia component="img"  height="140"  image={`${data.img}`} alt="home image looding......"/>
      <CardContent>
        <Typography gutterBottom variant="h5" component="div">{data.name}</Typography>
        <Typography variant="body2" color="text.secondary">{data.description}</Typography>
      </CardContent>
      ))}
      <CardActions>
        <Button size="small">Share</Button>
        <Button size="small">Learn More</Button>
      </CardActions>
    </Card>
  </div>


  );
}

CodePudding user response：

Change this

{data.map((item) =>( 
      <CardMedia component="img"  height="140"  image={`${data.img}`} alt="home image looding......"/>
      <CardContent>
        <Typography gutterBottom variant="h5" component="div">{data.name}</Typography>
        <Typography variant="body2" color="text.secondary">{data.description}</Typography>
      </CardContent>
      ))}

to this

{data.map((item) =>( 
    <>    
      <CardMedia component="img"  height="140"  image={`${data.img}`} alt="home image looding......"/>
      <CardContent>
        <Typography gutterBottom variant="h5" component="div">{data.name}</Typography>
        <Typography variant="body2" color="text.secondary">{data.description}</Typography>
      </CardContent>
    </>
))}

CodePudding user response：

You should have wrapped the inner element of the map in an empty Tag and also wrap the whole component in an <> </> this empty tag