Getting error message "li: 'key' is not a prop"

Question

I'm working with React (version 15.4.2), and I'm populating a <ul> dynamically with query results from my database. I thought that I had set up the 'key' property on the <li>s correctly, but evidently I have not - when the list renders, I get the error:

Warning: li: 'key' is not a prop. Trying to access it will result in 'undefined' being returned. If you need to access the same value within the child component, you should pass it as a different prop.

Here's the code for my list:

function UserList(props) {     return(         <ul className="UserList">             {                 props.user_list.map((user) => (                     <li className="UserListItem" key={user.id}>                         <Link to={`/users/${user.id}`}>{user.first_name} {user.last_name}</Link>                     </li>                 ))             }         </ul>     ); } 

I took a look at the docs, and it seems to me like this should be correct. If anyone could clarify my mistake, it would be much appreciated.

Answer 1

Somewhere else in the code you're trying to access props.key

Basically, "key" props are not passed to a child component.

React docs say: "special props (ref and key) are used by React, and are thus not forwarded to the component.".