Why did we need to use a new id prop instead of the existing key prop?

Question

In this lesson, we used passed a handler method to a child component to remove items from state. The handler needed an id parameter so it could remove the correct item. The child item already had a key={props.id} property, but the lesson added a id={props.id} and used that when calling the method.

To simplify the code a little, I tried just using the key (props.key inside the Item component), but that was undefined. Is the key property of a component not available inside itself, or is there some special way to call it?

Here's the relevant parts of my code:

const App = () => {
   const [items, setItems] = useState([
      ...
   ])

   const handleRemoveItem = (id) => {
      console.log("Removing " + id)
      setItems(prevItems => prevItems.filter(i => i.id !== id))
   }

   return (
      <div className='grocery-list'>
         <Header
            title='My Grocery List'
            itemTotal={items.length} />

         {/*Grocery List */}
         {items.map(item => 
            <Item
               key={item.id}
               name={item.name} 
               removeItem={handleRemoveItem}
            />
         )}
      </div>
   )
}

const Item = (props) => {
   return (
      <div className="item">
         <button className="remove-item" onClick={() => props.removeItem(props.key)}/>
         <span className="item-name">{props.name}</span>
         <Counter />
      </div>
   )
}

The output in the console is: Removing undefined

Answer 1 · 2024-03-02T17:10:33Z

March 2, 2024 5:10pm

Hi @Seth Foss the key prop is not part of the props object for a component, you can visualize this by console logging the props object inside the component to see it's available properties within the object. Therefore, this results in undefined and why another prop is used when associating items.

Resource

Welcome to the Treehouse Community

Looking to learn something new?

Seth Foss

Seth Foss

Why did we need to use a new id prop instead of the existing key prop?

1 Answer

Jamie Reardon

Jamie Reardon

Seth Foss

Seth Foss