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" to 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'.