CODEWITHSUNDEEP
javascriptreactjs
Abdul Wahab
Abdul Wahab

Reputation: 41

map function in react with arrow function

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

Upvotes: 3

Views: 3047

Answers (4)

Brian Thompson
Brian Thompson

Reputation: 14375

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.

Upvotes: 2

Code-Apprentice
Code-Apprentice

Reputation: 83537

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

Upvotes: 2

Andre Moraes
Andre Moraes

Reputation: 379

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

Upvotes: 0

Andrea Ceccarelli
Andrea Ceccarelli

Reputation: 31

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

Upvotes: 2

Related Questions