What's the right way to identify React key properties?

Question

I'm trying to learn React-Native. I'm looking at an example, Responsive image grid by Joshua Sierles. (Thank you Joshua!) In this sample, Joshua uses React to carefully place image elements in a controlled manner across the mobile display. Note: he uses ONLY three images and repeats them several times within the document. Unfortunately, as written, the example generates a warning:

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of YourProjectNameHere. See fb.me/react-warning-keys for more information. (Link extrapolated from the shortened form...)

I fully understand that each element within a row and each row generated by React must have a unique key property. What I'm not clear on is exactly how to do that. Here's my hack / work around. key={Math.random()}

This hack works fine, but it just seems so... wrong. The question here is, what is the right way to identify individual image ID's as well as identify individual row ID's?

'use strict';

 var React = require('react-native');
 var {
   AppRegistry,
   StyleSheet,
   Text,
   View,
   Image,
   Dimensions,
   ScrollView
 } = React;

 var _ = require('lodash');
 var {width, height} = Dimensions.get('window');

 var IMAGE_URLS = _.flatten(_.times(9, () => {return ['http://rnplay.org/IMG_0599.jpg', 'http://rnplay.org/IMG_0602.jpg', 'http://rnplay.org/IMG_0620.jpg']}));  // 9 x 3 = 27 images
 var IMAGES_PER_ROW = 4;

 var AwesomeProject1 = React.createClass({

   getInitialState() {
     return {
       currentScreenWidth: width,
       currentScreenHeight: height
     }
   },

   handleRotation(event) {
     var layout = event.nativeEvent.layout
     this.setState({currentScreenWidth: layout.width, currentScreenHeight: layout.height })
   },

   calculatedSize() {
     var size = this.state.currentScreenWidth / IMAGES_PER_ROW
     return {width: size, height: size}
   },


   // note:  I added key={Math.random()} in two places below.
   // Its a BS fix, but it seems to work to avoid the warning message.
   renderRow(images) {
     return images.map((uri) => {
       return (
         <Image style={[styles.image, this.calculatedSize()]} key={Math.random()} source={{uri: uri}} />  //key={Math.random()}
       )
     })
   },

   renderImagesInGroupsOf(count) {
     return _.chunk(IMAGE_URLS, IMAGES_PER_ROW).map((imagesForRow) => {
       return (
         <View style={styles.row} key={Math.random()}>
           {this.renderRow(imagesForRow)}
         </View>
       )
     })
   },

   render: function() {
     return (
       <ScrollView onLayout={this.handleRotation} contentContainerStyle={styles.scrollView}>
         {this.renderImagesInGroupsOf(IMAGES_PER_ROW)}
       </ScrollView>
     );
   }
 });

 var styles = StyleSheet.create({

   row: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'flex-start'
   },

   image: {
   }
 });

 AppRegistry.registerComponent('AwesomeProject1', () => AwesomeProject1);

I've tried every combination of key=uri.id , imagesForRow.id, images.id, etc that I can think of. None works as good as the Random Number function. Other ideas? What's the right way to do this?

---

Update per Chris Geirman's answer below: I wanted to show my final code.

renderRow(images) {
     return images.map((uri, idx) => {
       return (
         <Image style={[styles.image, this.calculatedSize()]} key={uri.concat(idx)} source={{uri: uri}} />  //key={Math.random()}
       )
     })
   },

   renderImagesInGroupsOf(count) {
     return _.chunk(IMAGE_URLS, IMAGES_PER_ROW).map((imagesForRow, idx2) => {
       return (
         <View style={styles.row} key={imagesForRow.concat(idx2)}>
           {this.renderRow(imagesForRow)}
         </View>
       )
     })
   },

Answer 1

I think the key is only really relevant if you're going to move components around (e.g. change the order) or prepend elements. If that's not an issue for you and you just want to silence the warning you can use the array index (second arg to map()).

Short official explanation of React reconciliation algorithm is in React Docs - Listing Mutations.

Expanded answer

I'm going to expand on this, because I believe the other answer, that you accepted, is misleading: not a legit solution as it presents itself.

My understanding is that React interprets an element child that's an array as a special case where the length or relative position of elements may change while component instances need to be preserved. In the React docs they describe it like this:

when the children are shuffled around (as in search results) or if new components are added onto the front of the list (as in streams).

But often an array is used just for convenience for scripting generation of children that could otherwise be expressed literally / statically. And that's the case I think you have here. If that wasn't the case you would need and would likely already have legit unique IDs. For example, if I understand your use case correctly, you could just do something like this, in which case there'd be no key warning from React:

var image_urls = [
  'http://rnplay.org/IMG_0599.jpg',
  'http://rnplay.org/IMG_0602.jpg',
  'http://rnplay.org/IMG_0620.jpg'
];

{/* #1 */}
<View>
  <Image style={[styles.image, this.calculatedSize()]} source={{uri: image_urls[0]}} />
  <Image style={[styles.image, this.calculatedSize()]} source={{uri: image_urls[1]}} />
  <Image style={[styles.image, this.calculatedSize()]} source={{uri: image_urls[2]}} />
  <Image style={[styles.image, this.calculatedSize()]} source={{uri: image_urls[0]}} />
</View>

{/* ... */

{/* #n */}
<View>
  <Image style={[styles.image, this.calculatedSize()]} source={{uri: image_urls[0]}} />
  <Image style={[styles.image, this.calculatedSize()]} source={{uri: image_urls[1]}} />
  <Image style={[styles.image, this.calculatedSize()]} source={{uri: image_urls[2]}} />
  <Image style={[styles.image, this.calculatedSize()]} source={{uri: image_urls[0]}} />
</View>

Obviously that would be a horrendous way to do it, so hence the use of arrays. But React doesn't distinguish this use of array (to script the equivalent of that) from the other case (where the length and order of elements is dynamic) and complains about the key. You could just ignore the warning, but it's easily silenced by just assigning the index value of the element.

Simplified example. These variations produce equivalent output, but differ by being literally declared or scripted and emitting a key warning or not.

var container = document.getElementById('container');
var items = ["A", "B", "C"];
var groups = Array(2).fill(items);

function render (element) {
  ReactDOM.render(
    element,
    container
  );
}

console.log("literal, no key warning");

var element = <div>
  <div class="items">
    <div>{items[0]}</div>
    <div>{items[1]}</div>
    <div>{items[2]}</div>
  </div>

  <div class="items">
    <div>{items[0]}</div>
    <div>{items[1]}</div>
    <div>{items[2]}</div>
  </div>
</div>;

render(element);


console.log("scripted, no key warning");

var element = <div>
  {groups.map((items, i) =>
    <div class="items" key={i}>
      {items.map((item, j) =>
        <div key={j}>{item}</div>
      )}
    </div>
  )}
</div>;

render(element);


console.log("scripted, with key warning");

var element = <div>
  {groups.map((items, i) =>
    <div class="items">
      {items.map(item =>
        <div>{item}</div>
      )}
    </div>
  )}
</div>;

render(element);

Answer 2

The "key" is how react's render determines whether the object assigned to that node has changed or not. It's an optimization tactic. If the same key is assigned to a particular node this render as was assigned last render, then it doesn't bother re-rendering. So you want each key to be unique to that node, but also to be predictable/consistent and therefore guessable so that every time you render that particular node, it will be assigned the exact same unique key.

Math.random() is a poor choice for a key because it fails the predictable/consistent criteria. Using the array index by itself is also a poor choice for similar reasons.

Instead, I would recommend using the array value + index

renderRow(images) {
     return images.map((uri, idx, arr) => {
       return (
         <Image style={[styles.image, this.calculatedSize()]} key={uri.concat(idx)} source={{uri: uri}} />  
       )
     })
   },