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: ";, pany: "@facebook"},
    {name: "Sophie Alpert", avatar_url: ";, pany: "Humu"},
    {name: "Sebastian Markbåge", avatar_url: ";, pany: "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="pany">{profilepany}</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,
);

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./u/810438?v=4", pany: "@facebook"},
    {name: "Sophie Alpert", avatar_url: "https://avatars2.githubusercontent./u/6820?v=4", pany: "Humu"},
    {name: "Sebastian Markbåge", avatar_url: "https://avatars2.githubusercontent./u/63648?v=4", pany: "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="pany">{profile.pany}</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,
);

• javascript
• reactjs

Share Improve this question Follow edited Jan 11, 2021 at 22:21 Code-Apprentice 83.7k2626 gold badges161161 silver badges285285 bronze badges asked Jan 11, 2021 at 21:41 Abdul WahabAbdul Wahab 4111 silver badge77 bronze badges 2

• Does this answer your question? What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript? – Emile Bergeron Commented Jan 11, 2021 at 22:07
• Possibly helpful as well: Are 'Arrow Functions' and 'Functions' equivalent / interchangeable? – Emile Bergeron Commented Jan 11, 2021 at 22:09

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

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().

map takes this function A => B, so basically the function is made by all that's enclosed the parenthesis. If look at my definition, A is the input argument and B is the output,which translates in wow = A and <Card {...wow} /> as B

There's several short-hand syntaxes here so maybe the clearest thing would be to write the function in long form and then re-shorten it with an explanation at each step.

Long form:

{testData.map((wow) => {
  return <Card name={wow.name} avatar_url={wow.avatar_url} pany={wow.pany} />
})}

Let's start by adding the spread syntax of wow. When you want to pass each of an object's values as props to a ponent, you can do so like this: <Comp {...obj}/>.

This leaves us with a slightly shorter version that's still equivalent to the original's meaning:

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

Next we have an implicit return, which means everything within the function body should be returned. This allows you to leave off the wrapping braces {} and drop the return keyword.

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

Finally, for single argument arrow functions, you may leave off the parenthesis in the function declaration:

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

To summarize:

wow is not the name of a function, but a parameter to an inline arrow function that takes advantage of several short-hand syntaxes.

map returns an instance of Card for each element in the array. Each iteration of the array the ponent is given all the values of the wow object as props.

Not exactly, the wow is an element for the array so the map is going to get each element in the testData.

The map is going to return 3 elements:

1º

{name: "Dan Abramov", avatar_url: "https://avatars0.githubusercontent./u/810438?v=4", pany: "@facebook"},

2º

{name: "Sophie Alpert", avatar_url: "https://avatars2.githubusercontent./u/6820?v=4", pany: "Humu"},

3º

{name: "Sebastian Markbåge", avatar_url: "https://avatars2.githubusercontent./u/63648?v=4", pany: "Facebook"},

But in that case will be returned in the Card ponent