TypeError: Cannot read properties of undefined (reading 'split') in react

Question

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 comes 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?

By the time it first renders it doesn't have the data yet .... — KcH
– KcH, Commented Sep 8, 2022 at 3:16
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 component, maybe i am wrong, why use props.data? — Me Bottle O Scrumpy
– Me Bottle O Scrumpy, Commented Sep 8, 2022 at 3:34
Where does props come from and what does it have to do with your component's state? — Phil
– Phil, Commented Sep 8, 2022 at 3:40

Denver Shan · Accepted Answer · 2022-09-08 03:39:39Z

2

As your code, it could be two reasons.

In the first time the code executes, there could be no data assigned to the data property.
If this is the same component, 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 component remove props.data and just use data.

answered Sep 8, 2022 at 3:39

Denver Shan

1061 silver badge6 bronze badges

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

Collectives™ on Stack Overflow

TypeError: Cannot read properties of undefined (reading 'split') in react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related