Cannot read properties of null (reading 'length') in reactJs

Question

I have been stuck on this error for an hour now and nothing i do seems to resolve it. What am i missing? Shouldn't the optional chaining on the array maping resolve this issue?

            <h2>Cart Items</h2>
            <div>
                {cartItems?.length === 0 && <div>Cart is empty</div>}
            </div>
            {cartItems?.map((e) => (
                <div key={e.id} className="row">/*error is on this line
                    <div className='col-2'>{e.name}</div>
                    <div className='col-2'>
                        {e.qty} x {e.qty*e.price.toFixed(2)}kr
                    </div>
                </div>
            ))}

Answer 1

The error is not thrown during mapping but while reading .length prop on cartItems array.

Answer 2

I think the optional-chaining there ensures cartItems is not null but that doesn't mean there could be null values inside the Array.

For example: [{ a: 1 }, null] is valid but reading properties during the mapping will fail.

I would make sure cartItems is clean.