How does the map function work in React.js?

Question

I'm following the ReactJS tutorial from www.tutorialpoints.com and I'm at this page

In a nutshell it provides the following data in JSON format:

this.state = {
         data: 
         [
            {
               "id":1,
               "name":"Foo",
               "age":"20"
            },

            {
               "id":2,
               "name":"Bar",
               "age":"30"
            },

            {
               "id":3,
               "name":"Baz",
               "age":"40"
            }
         ]
      }

and is looping through it with the map function below:

{this.state.data.map((person, i) => <TableRow key = {i} data = {person} />)}

What I fail to understand is why are they using a tuple (person, i) to target EACH object and how is the key = {i} part of the code working. I have tried removing the key part and the code still works. From further reading I understood that it helps reload only the specific data that has been changed instead of the whole dataset, but I'm not sure.

Can anyone go through ONLY the loop in that example line by line to clarify how this works?

Pranesh Ravi · Accepted Answer · 2016-10-19 09:46:39Z

4

Consider your .map() returns 10 items. When you change one of the 10 item, say 5th item, React won't know which element to change in particular without the key. So, it will re-render the entire items of the .map().

If you provide a key, the element with that key will be re-renders leaving the other 9 items undisturbed. This is to improve performance.

[UPDATE]

The key is reserved to identify an React element uniquely. It don't need to be i, it can be any random string. Personally, I use shortid to generate random unique key.

{this.state.data.map((person) => <TableRow key = {shortid.generate()} data = {person} />)}

React won't add it's reference ids(data-reactid) when you have a array of React elements. When you try to render that array, React will append your key to its data-reactid during normalization.

Array of elements without key

<tr class="" data-version="1.0.0" data-reactid=".0.2.2.1.0.0.1" role="row">
<tr class="" data-version="1.0.0" data-reactid=".0.2.2.1.0.0.1" role="row">
<tr class="" data-version="1.0.0" data-reactid=".0.2.2.1.0.0.1" role="row">
<tr class="" data-version="1.0.0" data-reactid=".0.2.2.1.0.0.1" role="row">
<tr class="" data-version="1.0.0" data-reactid=".0.2.2.1.0.0.1" role="row">

Array of elements withkey

<tr class="" data-version="1.0.0" data-reactid=".0.2.2.1.0.0.1.$123" role="row">
<tr class="" data-version="1.0.0" data-reactid=".0.2.2.1.0.0.1.$124" role="row">
<tr class="" data-version="1.0.0" data-reactid=".0.2.2.1.0.0.1.$125" role="row">
<tr class="" data-version="1.0.0" data-reactid=".0.2.2.1.0.0.1.$126" role="row">
<tr class="" data-version="1.0.0" data-reactid=".0.2.2.1.0.0.1.$127" role="row">

The number after $ is the key value you supply to that component. By this, React can uniquely identify a component.

Latest version of React won't expose the data-reactid in the DOM.

Read this for better understanding

edited Oct 19, 2016 at 9:46

answered Oct 19, 2016 at 8:25

Pranesh Ravi

19.2k10 gold badges51 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

MiniGunnR Over a year ago

Instead of {this.state.data.map(person => <TableRow data = {person} />)} I can use the code provided in the question and all that logic will be run by React? Is the key variable reserved ONLY for that particular purpose? May you direct me to an example where it is easy to see it in action?

MiniGunnR Over a year ago

I see that you didn't provide a tuple (person, i) to the map function. Is it because you have a function to generate key?

Pranesh Ravi Over a year ago

Yes, I use shortid to generate a random string. I've added the link.

Collectives™ on Stack Overflow

How does the map function work in React.js?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related