Reactjs: Key undefined when accessed as a prop

Question

Tools: Reactjs 0.14.0 Vanilla Flux

I need unique identifiers for 2 reasons:

1. Child Reconciliation
2. Keeping track of what child was clicked

So let's say I have a list of messages that looks like this:

[     {       id: 1241241234,  // <-----The unique id is kept here       authorName: "Nick"       text: "Hi!"     },     ... ] 

And now I use a Array.prototype.map() to create "ownee" component (MessageListItem) inside of the owner component MessageSection

function getMessageListItem(message) {     return (         <MessageListItem key={message.id} message={message} />     ); }  var MessageSection = React.createClass({     render: function() {         var messageListItems = this.state.messages.map(getMessageListItem);         <div>             {messageListItems }         </div>     } }); 

But the this.props.key is undefined in the MessageListItem even though I know for a fact that is was defined when it was passed down.

var ConvoListItem = React.createClass({     render: function() {         console.log(this.props.key); // Undefined     } }); 

I'm guessing there is a reason that React is not letting key be used as a prop.

Question:

If I can't use key as a prop, then what is the proper way to handle the duality need of keying and setting unique identifiers on a dynamic list of child elements that contain state?

Answer 1

key and ref aren't really 'props'. They're used internally by react and not passed to components as props. Consider passing it as a prop such as 'id'.

Answer 2

It is best to use id. Then in the eventHandler you can have event.target.id.

function getMessageListItem(message) {    return (     <MessageListItem key={message.id} id={message.id} message={message}/>   ); }