How to loop through array after data fetching is completed?

Question

I am a little new to react, and I am trying to loop through a list of menu items after it has been loaded. I set the sate to empty and put a condition to only start to use the .map() when the state is not empty. But i keep getting TypeError: menu_items.map is not a function. I know that it gets loaded because when i do a console.log(menu_items) it shows the menu item. I am little but confused on this one. Any help would be really appreciated.

import {useEffect} from 'react';
import {connect} from 'react-redux'
import {getMenu} from '../service/thunks'


const StoreMenu = ({loadMenu,match,menu_items}) => {

    useEffect(()=> loadMenu(match.params.id),[]);


if(menu_items !== "") {
    {
        menu_items.map(menu_item => console.log(menu_item.item_name))
    }
}
    return (<div> tesr</div>);


}

const  mapStateToProps = state => (

    {
        menu_items : state.menuItems

    }

)


const mapDispatchToProps = dispatch => (

    {

        loadMenu: (store_id) => dispatch(getMenu(store_id))

    }

)


export default connect(mapStateToProps,mapDispatchToProps)(StoreMenu);

menu_items must not be an Array, so there is no .map() prototype function. Can you check with Array.isArray(menu_items)? — terrymorse
– terrymorse, Commented Dec 5, 2020 at 19:00

Or Assayag · Accepted Answer · 2020-12-05 20:12:15Z

1

Fix the code to:

if (menu_items && menu_items.length > 0) {
    menu_items.map(menu_item => console.log(menu_item.item_name))
}
return ( 
   // Create JSX here.
);

answered Dec 5, 2020 at 20:12

Or Assayag

6,39213 gold badges73 silver badges109 bronze badges

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

Collectives™ on Stack Overflow

How to loop through array after data fetching is completed?

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