map function in react with arrow function

Question

I know what's going on here but I m not able to understand the map function here how it's working please tell me briefly ...

what I understand here is that the map function taking each element of the testData array and calls a function "wow" obviously wow function will store the map value after this function "wow" return something so its returning what I am confused is about the syntax here ...

{testData.map(wow => <Card {...wow}/>)}

const testData = [
    {name: "Dan Abramov", avatar_url: "https://avatars0.githubusercontent.com/u/810438?v=4", company: "@facebook"},
    {name: "Sophie Alpert", avatar_url: "https://avatars2.githubusercontent.com/u/6820?v=4", company: "Humu"},
    {name: "Sebastian Markbåge", avatar_url: "https://avatars2.githubusercontent.com/u/63648?v=4", company: "Facebook"},
];

const CardList = () => (
    <div>
    {testData.map(wow => <Card {...wow}/>)}
  </div>
);

class Card extends React.Component {
    render() {
    const profile = this.props;
    return (
        <div className="github-profile">
          <img src={profile.avatar_url} />
        <div className="info">
          <div className="name">{profile.name}</div>
          <div className="company">{profile.company}</div>
        </div>
        </div>
    );
  }
}

class App extends React.Component {
    render() {
    return (
        <div>
          <div className="header">{this.props.title}</div>
        <CardList />
        </div>
    );
  } 
}

ReactDOM.render(
    <App title="The GitHub Cards App" />,
  mountNode,
);

Answer 1

what I understand here is that the map function taking each element of the testData array and calls a function "wow" obviously wow function will store the map value after this function "wow" return

This is close, but not quite right. map() takes a function, but here you use the => syntax which is an anonymous function. That is, the function doesn't have a name. wow here is the name of the single argument to the function, not the name of the function.

map() passes each element of testData() into this anonymous function. Then that function returns something. This return value is used as the element in a new array that is eventually returned by map().