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

Question

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.

Answer 1

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

Answer 2

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

Answer 3

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