javascriptreactjsfluxreactjs-flux

Reactjs: Key undefined when accessed as a prop


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?


Solution

  • 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}/>
      );
    }