How to display object of array by its index and property with rezct hooks Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of How to display object of array by its index and property with rezct hooks without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I want to display items from an array of objects. The items have to be accessed by their index so that they can fit into the menu.

The error I am getting is

TypeError: Cannot read property ‘name’ of undefined

function Header() {
    const [menus, fetchMenu] = useState([]);

    useEffect(() => {
        const getMenu = () => {
            MenuService.getMenuCategories().then(response => {
                fetchMenu(response.data.categories)

            }, (error) => {
                const _content =
                    (error.response && error.response.data) ||
                    error.message ||
                    error.toString();
                fetchMenu(_content);
                console.log("inside-header_content", _content)
            }
            ).catch(e => {
                console.log(e);
            });
        };
        getMenu();
    }, []);


    return (
        <>
            <Navbar bg="navbar-light" expand="lg" id="header">
                <Navbar.Brand href="#home"><img src="/ima/_logo.SVG" id="logo" alt="logo" /></Navbar.Brand>
                <Navbar.Brand href="#home"><img src="/ima/s.SVG" id="shout-logo" alt="logo" /></Navbar.Brand>

                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">

                    <Nav className="mr-auto" id="navbarItemsContent">
                        <Nav.Link className="text-white" href="/home" id="nav-items">HOME</Nav.Link>
                        <Nav.Link className="text-white" href="/anniversary" id="nav-items">{menus[0].name}</Nav.Link>
                        <NavDropdown title="CONGRATULATIONS" id="basic-nav-dropdown">
                            <NavDropdown.Item id="dropdownItem" href="#action/3.1">{menus[1].name}</NavDropdown.Item>
                           <NavDropdown.Item id="dropdownItem" href="#action/3.3">{menus[2].name}</NavDropdown.Item>
                            <NavDropdown.Divider />
                            <NavDropdown.Item id="dropdownItem" className="itemDivided" href="#action/3.4">VIEW ALL</NavDropdown.Item>
                        </NavDropdown>

                    </Nav>


                </Navbar.Collapse>
            </Navbar>
        </>
    );
}

Answer

The first time your component renders, menus will be an empty array –

const [menus, fetchMenu] = useState([]);

Since the call to fetch the menu is asyncrhonous, that won’t have completed by the time the component renders for the first time. So, when you try and access (e.g.) menus[1].namemenus[1] is undefined (hence your error).

The easiest fix will be to conditionally render the links that depend on menus once they’ve been fetched; something like –

<Nav className="mr-auto" id="navbarItemsContent">
<Nav.Link className="text-white" href="/home" id="nav-items">HOME</Nav.Link>
{menus.length > 0 && (
    <>
        <Nav.Link className="text-white" href="/anniversary" id="nav-items">{menus[0].name}</Nav.Link>
        <NavDropdown title="CONGRATULATIONS" id="basic-nav-dropdown">
            <NavDropdown.Item id="dropdownItem" href="#action/3.1">{menus[1].name}</NavDropdown.Item>
            <NavDropdown.Item id="dropdownItem" href="#action/3.3">{menus[2].name}</NavDropdown.Item>
            <NavDropdown.Divider />
            <NavDropdown.Item id="dropdownItem" className="itemDivided" href="#action/3.4">VIEW ALL</NavDropdown.Item>
        </NavDropdown>
    </>
)}
We are here to answer your question about How to display object of array by its index and property with rezct hooks - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji