Unexpected token when using map - reactjs

Question

While fetching data from an API and rendering it on the screen i am using map method to cycle through the array, but somehow getting 'Unexpected token' in the token and I am unable to figure out what is the issue.
Getting an error where the map method is defined.
const ShopItems = props => {
return (
{
props.myData.map( (card) => (
<div className="card">
<img className="card-img-top" src="..." alt="Card image cap" />
<div className="card-body">
<h5 className="card-title">Card title</h5>
<p className="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
))
}
)
}
const App = () => {
const [item, setItem] = React.useState([])
React.useEffect(() => {
fetch('https://fakestoreapi.com/products/')
.then(res => res.json())
.then(data => {
setItem(data);
})
}, [])
return(
<div>
<Header />
<ShopItems myData={item}/>
</div>
)
}

Answer 1

Maybe try to enclose it in <>...</>:
return (
<>
{
props.myData.map( (card) => (
<div className="card">
<img className="card-img-top" src="..." alt="Card image cap" />
<div className="card-body">
<h5 className="card-title">Card title</h5>
<p className="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
))
}
</>
)