Here is my code.I'm using an API call in useEffect just like following:

    const [data, setData] = useState([]);

    const getQuotationById = async () => {
        const resp = await axios.get(`${process.env.REACT_APP_API_URL}quotation-details/${id}`);
        setData(resp.data);
    };

    useEffect(() => {
        getData().catch((e) => {
            console.log('error');
            console.log(e);
        });
    }, []);

return <div>
 {data.quantities.split('/').map((quantity, index) => (<span>quantity</span>)
</div>

The interesting thing is that an error TypeError: Cannot read properties of undefined (reading 'split') in react always es out.

But there is no error if I use the optional chain in the return sytanx like:

return <div>
 {data.quantities?.split('/').map((quantity, index) => (<span>quantity</span>)
</div>

Why this happens?

Here is my code.I'm using an API call in useEffect just like following:

    const [data, setData] = useState([]);

    const getQuotationById = async () => {
        const resp = await axios.get(`${process.env.REACT_APP_API_URL}quotation-details/${id}`);
        setData(resp.data);
    };

    useEffect(() => {
        getData().catch((e) => {
            console.log('error');
            console.log(e);
        });
    }, []);

return <div>
 {data.quantities.split('/').map((quantity, index) => (<span>quantity</span>)
</div>

The interesting thing is that an error TypeError: Cannot read properties of undefined (reading 'split') in react always es out.

But there is no error if I use the optional chain in the return sytanx like:

return <div>
 {data.quantities?.split('/').map((quantity, index) => (<span>quantity</span>)
</div>

Why this happens?

• javascript
• reactjs

• 4 By the time it first renders it doesn't have the data yet .... – KcH Commented Sep 8, 2022 at 3:16
• 1 try conditional rendering, while it has not loaded the data yet, render something else, like a spinner or a progress bar, after it has loaded the data, render the data. i am assuming you are using data of this ponent, maybe i am wrong, why use props.data? – Me Bottle O Scrumpy Commented Sep 8, 2022 at 3:34
• Where does props e from and what does it have to do with your ponent's state? – Phil Commented Sep 8, 2022 at 3:40
• It is a typo.It should be data rather props.data – CHIU TZE CHEUNG Commented Sep 9, 2022 at 4:14

1 Answer 1

As your code, it could be two reasons.

1. In the first time the code executes, there could be no data assigned to the data property.
2. If this is the same ponent, you are using the data from props. If you are not passing the props, it will be undefined. Or you want to use the data in the same ponent remove props.data and just use data.