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

Does this answer your question? [What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript?](https://stackoverflow.com/questions/24900875/whats-the-meaning-of-an-arrow-formed-from-equals-greater-than-in-javas) — Emile Bergeron, Jan 11 '21 at 22:07
Possibly helpful as well: [Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?](https://stackoverflow.com/q/34361379/1218980) — Emile Bergeron, Jan 11 '21 at 22:09

score 2 · Answer 1 · answered Jan 11 '21 at 21:51

2

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

answered Jan 11 '21 at 21:51

Andrea Ceccarelli

31
2

Brian Thompson · Answer 2 · 2021-01-12T01:10:32.603

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} company={wow.company} />
})}

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 component, 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 component is given all the values of the wow object as props.

score 2 · Accepted Answer · answered Jan 11 '21 at 22:22

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

score 0 · Answer 4 · answered Jan 11 '21 at 21:51

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.com/u/810438?v=4", company: "@facebook"},

2º

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

3º

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

But in that case will be returned in the Card component

map function in react with arrow function

4 Answers4