Get TypeError: Cannot read property of undefined

Question

I am new to react and I try to get data from the backend and display.

    const { id } = useParams();
    console.log(id);

    const [posts, getPosts] = useState([]);

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

    const getOnePost = async () => {
        await axios.get(`/buyerGetOnePost/${id}`)
            .then ((response)=>{
                const allPost=response.data.onePost;
                getPosts(allPost);
            })
            .catch(error=>console.error(`Error: ${error}`));
    }
    console.log(posts);

    console.log(posts.location.latitude);
    console.log(posts.location.longitude);

I passed an id and get data from the backend and it works correctly. But when I try to get the location's latitude and longitude it gives an error like this:

TypeError: Cannot read property 'latitude' of undefined

When I write the code like this :

    console.log(posts.location);
    console.log(posts.location);

It does not give any error. But when I try to access the data in the location object it gives the above typeError.

This is a screenshot of location object

console.log(posts);

This gives the output of the whole post.

Image of the whole post

Just like this image. Inside the post, there is an object called location. In the location object, it has an Id, longitude, and latitude. When I console.log(posts.location) do like this, the location object prints in the console. But when I want to access the longitude and latitude in the location object it gives an error.

How do I solve this issue?

Answer 1

There are few problems with your code:

1. You've defined useState() default value as an empty array [], then you're treating posts as an object.
2. Secondly by the time the code runs, posts value is [] then you're trying to print out console.log(posts.location.latitude); which will ofcouse give you an error.
3. Async await usage is not proper.

I would structure my code as something like:

    const { id } = useParams();
    console.log(id);

    const [posts, setPosts] = useState({});
    const [loading, setLoading] = useState(true);

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

    useEffect(()=>{
        if (posts && posts.location) {
            console.log(posts.location);
            console.log(posts.location.longitude);
            console.log(posts.location.latitude);
        }
    }, [posts]);


    const getOnePost = async () => {
        try {
             const response = await axios.get(`/buyerGetOnePost/${id}`)
             console.log(response);
             const allPost=response.data.onePost;
             setPosts(allPost);
        } catch (error) {
             console.error(`Error: ${error}`))
        }
    }

Hope this helps, basically you've added posts as a dependency in 2nd useEffect to run when it's value changes.

Answer 2

It is definitely something wrong with the object. Are you sure that it is posts.location.latitude? What about posts.latitude ?