javascript - Getting Error: property of 'undefined' in Nested React Router

Question

I am trying to get data through nested react-router but getting the value undefined.

My data:

const data = [
    {
        id: 0,
        name: "Skateboard1",
        price: 20.10,
        img: picture1
    },
    {
        id: 1,
        name: "Skateboard2",
        price: 80.50,
        img: picture2
    }
]

App.js:

const App = () => {
  return (
    <Router>
      <Switch>
 
        <Route exact path="/shop/:id" render={(itemProp) => <ShopItem shopItemId={itemProp.match.params.id} />} />

      </Switch> 
    </Router>
    
  );
}

ShopItem Component:

const ShopItem = (shopItemId) => {

        const item = data.find((i) => i.id === shopItemId) 
    
    return(
        <div>
               <h2>{item.name}</h2>
        </div>
    )
}

Error:

TypeError: Cannot read property 'name' of undefined

on console.log(shopItemId)

{
  shopItemId: "1"
}

It seems like a silly mistake. But can't get what's wrong.

Please any help would be appreciated

question from:https://stackoverflow.com/questions/65947487/getting-error-property-of-undefined-in-nested-react-router

Answer 1

The function data.find((i) => i.id === shopItemId) didn't find any element that matches the comparison, so item is undefined. shopItemId is an object, so the real value is shopItemId.shopItemId and use == operator since one value is an integer and the other is a string like:

const item = data.find((i) => i.id == shopItemId.shopItemId)