React, using .map with index

Question

I have a simple React component like so:

import React from 'react';

const ListPage = ({todos}) => (
  <div>
    <h6>todos</h6>
    <ul>
    {todos.map(({todo, index}) => (
      <li key={index}>{todo}</li>
    ))}
    </ul>
  </div>
)

ListPage.propTypes = {
  todos: React.PropTypes.array,
};

export default ListPage;

I can see that the docs for Array.prototype.map() shows that the second argument is index, next to currentValue. How does one alter the existing code to pick up the second argument?

isherwood · Accepted Answer · 2023-02-28 14:35:05Z

You need to to this:

todos.map((key, index) => { ... }) without object brackets for arguments.

({todo, index}) => { ... } - that syntax means that you want to get properties todo and index from first argument of function.

You can see syntax here:

Basic syntax

 (param1, param2, …, paramN) => { statements }
 (param1, param2, …, paramN) => expression
          // equivalent to:  => { return expression; }

 // Parentheses are optional when there's only one parameter:
 (singleParam) => { statements }
 singleParam => { statements }

 // A function with no parameters requires parentheses:
 () => { statements }

Advanced syntax

 // Parenthesize the body to return an object literal expression:
 params => ({foo: bar})

 // Rest parameters and default parameters are supported
 (param1, param2, ...rest) => { statements }
 (param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements }

 // Destructuring within the parameter list is also supported
 var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
 f();  // 6

isherwood · Accepted Answer · 2023-02-28 14:35:28Z

23

Here is an example based on Timur Bilalov's answer to make easy to understand.

var materials = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

materials.map((material,index) => console.log(index +" = " + material + " = " + materials[index]));

Output

"0 = Hydrogen = Hydrogen"
"1 = Helium = Helium"
"2 = Lithium = Lithium"
"3 = Beryllium = Beryllium"

Reference
https://reactjs.org/docs/lists-and-keys.html https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Hope it help

edited Feb 28, 2023 at 14:35

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

answered Jun 3, 2018 at 13:58

Linh

61.3k25 gold badges274 silver badges298 bronze badges

Comments

Mijamo · Accepted Answer · 2016-04-06 08:42:37Z

15

Be careful, you should not use the index as a key if the list is dynamic, it is antipattern and could lead into troubles.

You should use the index as a key ONLY if you are sure you will not have to delete or add items to your todos after creation (it could still be acceptable if you add items but only at the end of the list, and still never delete). Otherwise React might run into problems reconciliating your children.

The best practise is to add an "id" to all your todos (incremental or UUID) and use it as the key for all the react lists that need it.

answered Apr 6, 2016 at 8:42

Mijamo

3,5261 gold badge23 silver badges21 bronze badges

2 Comments

ilrein Over a year ago

While my goal is to use a _id provided from Mongo, to test the function out, I realized I needed to understand the way es6 .map works first.

Mijamo Over a year ago

I get your point. FYI, map is not ES6 specific, but arrow functions are. You can use .map in all browser since IE9 a long time ago.

Collectives™ on Stack Overflow

React, using .map with index

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related