Functional Javascript map with index

Question

I need a functional approach to solve a very basic problem, the problem with list indexes, let me write an example with React and ramda that shows the need of an index.

const R = require('ramda');

const array = ["foo", "bar", "foobar"];

// Need to put them in a nice html li ?
// this works with a warning that you 
// need a unique key to each item.
const renderList = R.map( item => <li>{item}</li> );

// we can solve it like that.
const mapIndexed = R.addIndex(R.map)
const renderListIndexed = mapIndexed((item, id) => <li key={id}>{item}</li>

All of that is cool, but I'm pretty sure the use of an indexed map is not a functional approach, let me know if I'm wrong.

_the use of an indexed map is not a functional approach_ - what makes you think that? By the way, if your items have a real ID, then it's much better to use that than the list index as the key. React uses these keys for diff-ing between renders. — Tom Fenech, May 24 '17 at 17:45
Because I thought the guys at Ramda would put it in the map function if it was `functional`. — elaich, May 24 '17 at 17:47
...you keep using that word. I do no think it means what you think it means Vizzini. — Jared Smith, May 24 '17 at 17:51
For me it is as simple as that, I give my map function an array of strings, with no IDs, so when the function gives me an ID as second argument, I guess I consider it not functional. — elaich, May 24 '17 at 17:54
I don't think that there is a consensus that a `map` with index isn't functional. There are actually languages that include a `mapi` function. Please note that map/reduce et al. abstract from recursion. Hence an alternative is to simply use tail recursion, where beside the accumulator the index is passed between recursive calls. Regarding Ramda I've found this [issue](https://github.com/ramda/ramda/issues/1478), which might be interesting for you. I'm not familiar with Ramda though. — , May 24 '17 at 18:51
This is an antipattern, [don't use indexes as react keys](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318) — eenagy, May 29 '17 at 04:30

score 4 · Answer 1 · answered May 24 '17 at 18:34

I'm not sure what is Ramda doing since I'm not familiar with React stuff, but if you need an index for elements of your array, you can use basic Array.map function.

const array = ["foo", "bar", "foobar"];

array.map(function(item, index) { 
  return {
    item: item,
    id: index
  }
});

which will give you an array of objects structured as:

[{ id: 0, item: "foo" }, { id: 1, item: "bar" }, { id: 2, item: "foobar" }]

Hope this helps!

score 0 · Answer 2 · answered May 24 '17 at 21:18

0

Look at addIndex. There are some very good reasons why Ramda does not include it by default, but this function will mix it in for you.

Try

const renderList = R.addIndex(R.map)( item => <li>{item}</li> );

answered May 24 '17 at 21:18

Scott Sauyet

49,207
4
49
103

Functional Javascript map with index

2 Answers2