Tools: Reactjs 0.14.0 Vanilla Flux
I need unique identifiers for 2 reasons:
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?
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}/>
);
}