ReactJS : TypeError: Cannot read property 'item' of undefined

Question

I am having trouble with a little React Router exercise

I have a File "ItemDetail.js" in which i define a Componenet "ItemDetail" which is called by a Route from another Component like so: <Route path="/shop/:id" component={ItemDetail}/>. This is my code:

import React, {useState, useEffect} from "react";

function ItemDetail({ match }) {

    const [item, setItem] = useState({});
    console.log(match);

    useEffect(() => {
        fetchItem();
    }, []);

    
    const fetchItem = async () => {
        const data = await fetch(`https://fortnite-api.theapinetwork.com/item/get?id=${match.params.id}`);
        const item = await data.json();
        setItem(item);
        console.log(item);
    }


    return (
      <div>
          <h3>Item: {item.data.item.name}</h3>
      </div>
  );
}

export default ItemDetail;

The id of the path is an id that i need for the API call (over match.params.id).

The fetchItem() method fetches the data I need as a JSON, I then save it in the state item and then render my render stuff. But it throws an error with : "TypeError: Cannot read property 'item' of undefined" in the line where i access item.data.name from JSX.

Weird thing is: when I change <h3>Item: {item.data.item.name} </h3> to <h3>Item: </h3> and then back to <h3>Item: {item.data.item.name} </h3> It works, just this one time, and when i refresh or navigate through my site to this path again it throws this error again

On your initial render, item is only set to {}, which means trying to access item.data.item will blow up (you'd be trying to access item on undefined). One common pattern to avoid this is to have something display while it's loading from the fetch call: <h3>Item: {item.data ? item.data.item.name : "Loading..."}</h3> — Nick
– Nick, Commented Dec 30, 2020 at 18:33
Ohh so it's because the code in return is is done executing before fetchItem()? Thanks that worked for me — Washbear
– Washbear, Commented Dec 30, 2020 at 18:38
Yeah, the fetch happens asynchronously, so there's definitely a render that happens before the fetch returns and you set state. — Nick
– Nick, Commented Dec 30, 2020 at 18:40

Okan · Accepted Answer · 2020-12-30 18:48:40Z

1

You need control it because react renders before you get item. You can edit like this : So it will check when you got item it will render the page.

import React, {useState, useEffect} from "react";

function ItemDetail({ match }) {

    const [item, setItem] = useState({});
    console.log(match);

    useEffect(() => {
        fetchItem();
    }, []);

    
    const fetchItem = async () => {
        const data = await fetch(`https://fortnite-api.theapinetwork.com/item/get?id=${match.params.id}`);
        const item = await data.json();
        setItem(item);
        console.log(item);
    }


    return (
      <div>
         <h3>Item: {item && item.data && item.data.item ? item.data.item.name : "Loading..."}</h3>
      </div>
  );
}

export default ItemDetail;

Also you can use optional chaining for the short solution : <h3>Item: {item?.data?.item ? item.data.item.name : "Loading..."}</h3>

edited Dec 30, 2020 at 18:48

answered Dec 30, 2020 at 18:40

Okan

585 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Okan Over a year ago

Yes i forgot it, you are right. I'm editing the code.

Okan Over a year ago

Also i added item and item.data and item.data.item checks so it will be best check isn't it?

Nick Over a year ago

Yeah. Actually another much simpler option, if optional chaining is available, would be to just do something like this: item?.data?.item?.name || "Loading..."

Okan Over a year ago

I know that maybe it's not available so i added far way of solution. But it's possible.

Collectives™ on Stack Overflow

ReactJS : TypeError: Cannot read property 'item' of undefined

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related