Reactjs: Key undefined when accessed as a prop
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'.
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}/>
);
}
As we already established in other answers that you can't use key
since it isn't passed as a prop and instead used internally by react. Here is my 2 cents as an alternative:
Since you're passing the entire array of messages as a prop while creating the <MessageListItem>
component, you don't necessarily need to pass another prop with id
. You can simply use {this.props.message.id}
whenever you need to use id.