Cannot access object properties via props in ReactJS

Question

I fetch data from API and pass it to Table component 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 component, 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 component, but for some reason I need to use function component. Can you help me on this one ?

Evgeny Klimenchenko · Accepted Answer · 2020-06-23 19:22:06Z

5

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

answered Jun 23, 2020 at 19:22

Evgeny Klimenchenko

1,1941 gold badge7 silver badges15 bronze badges

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

1 Comment

Dimisizz Over a year ago

Your solution is working for me. Thank you very much for your help.

David · Accepted Answer · 2020-06-23 19:23:42Z

4

fetch is asynchronous. So the first thing the component 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 component:

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 component (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].

answered Jun 23, 2020 at 19:23

David

221k42 gold badges245 silver badges337 bronze badges

1 Comment

Dimisizz Over a year ago

Hi, thank you very much for your suggestion. It is useful and it solves my problem.

pageNotfoUnd · Accepted Answer · 2020-06-23 19:24:59Z

1

because the initial render will occur before the API call is completed 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]

answered Jun 23, 2020 at 19:24

pageNotfoUnd

67610 silver badges21 bronze badges

1 Comment

Dimisizz Over a year ago

Thank you very much for your suggestion.

Collectives™ on Stack Overflow

Cannot access object properties via props in ReactJS

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related