TypeError: Cannot read property 'length' of undefined in reactjs

Question

i am facing problem when i try to return the length of array in react. the error is 'TypeError: Cannot read property 'length' of undefined'. I have put this in another child component and it work but when i tried in NavBar it just show the error.

import React from 'react';
import './NavBar.css';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCartPlus } from '@fortawesome/free-solid-svg-icons';

const NavBar = (props) => {
    const order = props.cart
    return (
        <div className='container-fluid'>
            <nav className="navbar navbar-expand-lg navbar-light  justify-content-md-between justify-content-center flex-wrap">
                <a href="/"><img src="https://i.ibb.co/NZcQbJM/logo2.png" alt="Red Onion Food"/></a>

                <div>
                    <a href="/" className='nav-item' > <FontAwesomeIcon icon={faCartPlus} /></a>
                    <a href="/" className='nav-item login'>Login</a>
                    <a href="/" className='nav-item'><button className="btn btn-danger btn-rounded">Sign Up</button></a>
                </div>
            </nav>
            <div><h6>{order.length}</h6></div>
        </div>
    );
};

export default NavBar;

I dont know what to do!!!

How do you render NavBar, you should pass a prop to navbar called cart that is an array. — HMR
– HMR, Commented May 3, 2020 at 7:40
you should provide the code of parent element of NavBar, that people could have idea how cart is, and how cart to be the props of NarBar. — Kuo-hsuan Hsu
– Kuo-hsuan Hsu, Commented May 3, 2020 at 8:22

Andy Hoffman · Accepted Answer · 2020-05-03 07:41:55Z

1

You need to short-circuit the render based on the existence of the array. You're trying to render the length of order before the prop is available.

Try the following:

<div><h6>{order && order.length}</h6></div>

answered May 3, 2020 at 7:41

Andy Hoffman

19.2k5 gold badges50 silver badges68 bronze badges

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

Comments

Arun Kumar · Accepted Answer · 2020-05-03 07:46:41Z

0

The undefined error is because of order is not available that time, so you need to check for the presence of order and then execute.

{order ? order.length : 0}

answered May 3, 2020 at 7:46

Arun Kumar

3554 silver badges10 bronze badges

Comments

H S · Accepted Answer · 2020-05-03 08:21:21Z

The other answers pretty much sorted the problem out, i.e. you are trying to literally say undefined.length since the prop order is not defined at some stage while creating/updating the component.

But there is still a cleaner solution to it IMO - order?.length.

And the logic of what-if-not (from the answer by @arun-kumar) - could also be written as - order?.length ?? 0 or order?.length || 0.

Collectives™ on Stack Overflow

TypeError: Cannot read property 'length' of undefined in reactjs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related