React.js Array Index ID ?

Question

I noticed we added an 'id' key to our array. I am fully aware this marks a unique entry in the array and passing that as a key to the React player component makes sense. Though why could we not pass the array index?

for Example: :-

----- Update -----

From the PLAYERS array by default each entry has an index starting from 0 when i use the map function in React and assign my player component a key using the PLAYERS index is this okay or is this a problem or does it need to be unique entry from the PLAYERS array? such as an id key in the array?

var PLAYERS = [
  {
    name: "Jordan Watson",
    score: 31,
  },
  {
    name: "Andrew Chalkley",
    score: 35,
  },
  {
    name: "Alena Holligan",
    score: 42,
  },
];

<div className="players">
    {props.players.map(function(player, index){
        return <Player name={player.name} score={player.score} key={index} /> 
    }.bind(this))};
</div>

This I assume the reason behind this is if in any circumstance one of the JSON or array items are removed the index will be affected?

Jordan.

Answer 1 · 2016-11-11T14:37:49Z

November 11, 2016 2:37pm

Not sure if I understand your question correctly Jordan.

--- UPDATE ---

Thanks for updating your question it's much clearer to me know. The index position of the Array IS unique for the PLAYERS array of Objects. Therefore, if an item is removed/edited within the PLAYERS array the render will understand the object it refers to based upon the key={}supplied and can then update and re-render. Generally you will need to use some component lifecycle functions to achieve this e.g. if you use componentWillReceiveProps(), or if using Redux (which I highly recommend) when you connect()the component and mapStateToProps() the updates will re-render the component.

The index parameter in the .map() callback is the index position of each 'Player' within the 'Players' array. The .map() function is an iterator that creates a new Array instance on each element within the provided array. We pass it to the key={} property of the <Player /> component so that when any changes occur React can re-render only the component that has changed, rather than re-rendering the entire array of components which would become quickly expensive on memory resources.

Reading up on Array.prototype.Map()

ReactJS documentation on Keys

Let me know if I have misunderstood :-)

Welcome to the Treehouse Community

Looking to learn something new?

Jordan Watson

Jordan Watson

React.js Array Index ID ?

1 Answer

Angelica Hart Lindh

Angelica Hart Lindh

Jordan Watson

Jordan Watson