Why does this html element has only 1 key according to js?

I’m reading the book road to react.

A List (react component) function returns this element:

<Item key = {item.objectID} item = {item}/>

Item is again another react component, which is defined as

function Item(props){
  const keys = Object.keys(props);
  console.log("properties of Item Element:" + keys)
  return(
    <li>
    <span>
      <a href={props.item.url}>{props.item.title}:</a>
    </span>
    <span style={authorStyle}>  {props.item.author},</span>
    <span> {props.item.num_comments},</span>
    <span> {props.item.points}.</span>
    </li>
  )
   
};

The strangest thing to me is that I would expect props to have two properties: key and item. However, the console only shows:

properties of Item Element:item

Why is this?

Edit: When I do console.log(“props:” + props), I get

props:[object Object]

Answer

It’s not that that HTML element has only one key. Item or props are not HTML elements. I think your question is what happens to the key prop and why this prop is not accessible in your Item component.

While most props on a JSX element are passed on to the component, there are two special props (ref and key) which are used by React and not forwarded to components.

In your case props.key is undefined. Think of keys as something that’s not for you to use. It’s for React itself to help identify which items have changed, are added, or removed. They don’t get passed to your components.

If you also want to use the item.objectID, you’ll need to pass it explicitly as a prop with a different name.