Assign position in array as react key?

Question

I have an array which consists of different strings. I want to map through it and display it in React. React does not like it when two strings are the same.

My question is this: Is there a way for me to map through the array and assign the position of the element in the array (0,1,2,3..) as the key? I am not sure how I would access this? Can I?

let renderthis = this.props.myreducer.somearray.map((element) =>
  <span key={what can I put here?}>{element} </span>
);

I tried this btw, but it did not work:

let renderthis = this.props.myreducer.somearray.map((element, i) =>
  <span key={i}>{element} </span>
);

Warning: flattenChildren(...): Encountered two children with the same key, .1:$afaf. Child keys must be unique; when two children share a key, only the first child will be used.

thanks. see my edit, if this is what you mean. I tried that but I get a warning that the elements have duplicate keys. But maybe what I am doing there is wrong? — George Welder
– George Welder, Commented May 5, 2017 at 0:53
I dont think so. I am getting that error at precisely the moment I add a duplicate element to that array. — George Welder
– George Welder, Commented May 5, 2017 at 0:56
Not sure where you took the .1:$afaf. i is a number there. — zerkms
– zerkms, Commented May 5, 2017 at 0:57

zerkms · Accepted Answer · 2017-05-05 01:02:31Z

2

Array.prototype.map callback accepts the second argument as an item index.

That means that if you simply need unique keys per a collection of element and you don't have any other values that are naturally unique you can simply do:

let renderthis = this.props.myreducer.somearray.map((element, i) =>
  <span key={i}>{element} </span>
);

answered May 5, 2017 at 1:02

zerkms

256k73 gold badges447 silver badges551 bronze badges

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

Collectives™ on Stack Overflow

Assign position in array as react key?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related