Cannot read properties of 'undefined': 'props'

[ppowell777]

I am trying to write a very simple React standalone function that will take a URL as a parameter and return the fetched HTML as a result to the parent component.

Here is my code:

import { useEffect, useState } from 'react';

const GetData = ({ props }) => {
    const [html, setHtml] = useState('');
    const [loading, setLoading] = useState(true);

    useEffect((props) => {
        console.log(typeof props);  // "undefined" why?
        const controller = new AbortController();
        const timeout = setTimeout(() => {
            controller.abort();
        }, 5000);
        fetch(props.url, {
            signal: controller.signal
        })
            .then(response => {
                clearTimeout(timeout);
                if (response.ok && response.status === 200) {
                    return response.text();
                } else if (response.status >= 400) {
                    return Promise.reject(response.statusText);
                }
            })
            .then(async html => {
                setHtml(await html);
                setLoading(false);
            })
            .catch(error => {
                console.error(error);
            });
    });

    if (loading) {
        return '';
    } else {
        return html;
    }
}

export default GetData;

And here is the Header.js that calls it (among other React components that will also call it):

import React from 'react';
import GetData from './get_data';
import headerPng from './images/header.png';

const Header = () => {

    const myUrl = 'http://localhost/test.php';

    return (
        <header id="fvap_header" className="usa-header">
            <div><GetData url={ myUrl } /></div>
             This is my header
        </header>
   );
};

export default Header;

I am passing the URL as I understand how to pass a parameter to a React component, and yet I constantly get the error:

Cannot read properties of undefined: 'props"

I have no idea how to fix this issue; this after hours of Google searching to no avail. Please help.

Thanks

 

[simong1993]

Hey mate,

You’re almost there — it’s just a small mix-up with how you're handling props.

In your GetData component, you're doing:

const GetData = ({ props }) =&gt; {<br>

But when you call it like this:

&lt;GetData url={myUrl} /&gt;<br>

…it’s passing url directly — not an object called props. So inside your component, props is undefined, which is why you're getting that error.

Just change your component to this:

const GetData = ({ url }) =&gt; {<br>

And then update your useEffect to this:

useEffect(() => {
    const controller = new AbortController();
    const timeout = setTimeout(() => {
        controller.abort();
    }, 5000);

    fetch(url, { signal: controller.signal })
        .then(response => {
            clearTimeout(timeout);
            if (response.ok) return response.text();
            return Promise.reject(response.statusText);
        })
        .then(text => {
            setHtml(text);
            setLoading(false);
        })
        .catch(error => {
            console.error(error);
            setLoading(false);
        });

    return () => controller.abort();
}, [url]);

Also heads up — components don’t return raw data like functions. If you want to return the HTML string to the parent, you’ll need to turn this into a custom hook, or just render it directly inside GetData using dangerouslySetInnerHTML.

Let me know which direction you're going and I’ll chuck you a quick example.

 

[ppowell777]

Sorry for getting back so late.

My friend helped me solve it by converting the component into a pure React non-component function that uses React Hooks:

import { useEffect, useState } from 'react';

// React function non-component due to naming convention
export const useGetData = ({ url }) => {
    const [html, setHtml] = useState('');
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const controller = new AbortController();
        const timeout = setTimeout(() => {
            controller.abort();
        }, 5000);
        fetch(url, {
            signal: controller.signal
        })
        .then(response => {
                clearTimeout(timeout);
                if (response.ok && response.status === 200) {
                    return response.text();
                } else if (response.status >= 400) {
                    return Promise.reject(response.statusText);
                }
            })
        .then(async html => {
                setHtml(await html);
                setLoading(false);
            })
        .catch(error => {
                console.error(error);
         });
    });

    if (loading) {
        return '';
    } else {
        return html;
    }
}

And calling it like this:

return (
  <div>{ useGetData({url: myUrl}) }</div>
)