Hi I am new to JS and just learnt map function. I am trying to rewrite the following code taken from chapter 6 (https://nextjs.org/learn/react-foundations/displaying-data-with-props). I intend to remove the '=>' notation. Can you please help identify the mistake in my code? Thanks


Working code from tutorial

function HomePage() {
const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];

return (
<div>
<Header title="Develop. Preview. Ship." />
<ul>
{names.map((name) => (
<li>{name}</li>
))}
</ul>
</div>
);
}

My code that needs to be fixed

function HomePage() {
const names = ['A', 'B', 'C', 'D'];
return (
<div>
<Header title = "Develop. Preview. Ship."></Header>
<ul>
{
names.map(function (namesElement))
{
return (
<li> {namesElement} </li>
)};
}
</ul>
</div>
);
}