I fetch data from API and pass it to Table ponent like this:

function MainSectionOrganization() {

    const [obj, setObj] = useState([]);

    useEffect(() => {
        fetch('http://127.0.0.1:5000/getCompanies')
        .then((response) => {
            return response.json();
        }).then((data) => {
            setObj(data);
        })
    }, []);

    return (
        <Table data={obj} />
    )
}

Then, in Table ponent, I try to do console.log for props.data[0] and I see data in Chrome terminal correctly.

import React from 'react';
import './Table.css';
import { useTable } from 'react-table';

function Table(props) {

    console.log(props.data[0]);
    ...

However, when I try to access any properties of the object, for example console.log(props.data[0].OU01_Code), I encounter an error Cannot read property '...' of undefined

I see many people have solution with class ponent, but for some reason I need to use function ponent. Can you help me on this one ?

I fetch data from API and pass it to Table ponent like this:

function MainSectionOrganization() {

    const [obj, setObj] = useState([]);

    useEffect(() => {
        fetch('http://127.0.0.1:5000/getCompanies')
        .then((response) => {
            return response.json();
        }).then((data) => {
            setObj(data);
        })
    }, []);

    return (
        <Table data={obj} />
    )
}

Then, in Table ponent, I try to do console.log for props.data[0] and I see data in Chrome terminal correctly.

import React from 'react';
import './Table.css';
import { useTable } from 'react-table';

function Table(props) {

    console.log(props.data[0]);
    ...

However, when I try to access any properties of the object, for example console.log(props.data[0].OU01_Code), I encounter an error Cannot read property '...' of undefined

I see many people have solution with class ponent, but for some reason I need to use function ponent. Can you help me on this one ?

• javascript
• reactjs
• undefined
• react-props

3 Answers 3

Hey the problem is that you trying to access props.data[0].OU01_Code and it is not there YET, so you need to make some kind of condition to check that it is there. Try:

if (props.data && props.data[0]) {
  console.log(props.data[0].OU01_Code)
}

Let me know if it helps, cheers

fetch is asynchronous. So the first thing the ponent does is get rendered with an empty array:

const [obj, setObj] = useState([]);
//...
return (
    <Table data={obj} />
)

When that happens, any reference to an element of that array would be undefined:

props.data[0]

So trying to read a property of that undefined array element would result in that exact error:

props.data[0].OU01_Code
// Cannot read property 'OU01_Code' of undefined

After fetch resolves its result and the state is updated, obj has elements (presumably) and you can access them.

Conceptually, you need to handle the situation where your array is empty. Do you want to display <Table /> at all in that case? If not, you can conditionally display it in the parent ponent:

return (
    <>
        {obj.length > 0 && <Table data={obj} />}
    </>
)

Or if you do want to display <Table /> with an empty array then you'll need to include logic within that ponent (which we can't see at this time) to handle an empty array. Basically, you need to check props.data.length before trying to access props.data[0].

because the initial render will occur before the API call is pleted you can use props.data && console.log(props.data[0]) or if you're open to use Optional chaining it would be easy even props?.data?.[0]