props.array.map is not a function

Question

I have a few components that are to render dynamically based on values passed through props. My main component(1) is dynamically creating its subcomponents(2) and passing values into those components via props. Each component(2) created is then supposed to utilize the values in props to create new subcomponents(3) of this component.

The problem arises when I try to map the object array passed as props in component 2. Component 1 successfully creates components 2, but component 2 displays the error "this.props.section.map is not a function". I'm using the exact code from component one, the only difference is I am referencing the array via props.

this.state = {
  menuSections: [
    {
      id: 1, title: 'Starters', menuItem: [{
        id: 1,
        name: 'Meatball',
        description: 'Large Meatball',
        price: '11 meatballs'
      }]
    },
    {
      id: 2, title: 'Starters', menuItem: [{
        id: 2,
        name: 'Meatball',
        description: 'Large Meatball',
        price: '11 meatballs'
      }]
    },
    {
      id: 3, title: 'Starters', menuItem: [{
        id: 3,
        name: 'Meatball',
        description: 'Large Meatball',
        price: '11 meatballs'
      }]
    },
  ],

{this.state.menuSections.map(menuSection => (<MenuSection
  section={menuSection} mobileMode={this.state.mobileMode} />))}

This is the code from my App component, which works like a charm. the code for my 2nd component (MenuSection) is where the problem arises.

{this.props.section.map((itemContainer, i) => (<ItemContainer styles={styles} 
  image={imageFood1} title={itemContainer.menuItem[i].name}
  description={itemContainer.menuItem[i].description}
  price={itemContainer.menuItem[i].price} />))}

Ideally, the section.map function in the 2nd component will render each individual menu item based on the props passed from the Main app. Instead, I receive the error "this.props.section.map is not a function".

edit: I know variations of this question have been asked before, but I have tried numerous suggestions, none of which have worked.

1

`section` is not a list. – Joseph D. Oct 04 '19 at 17:36

score 3 · Accepted Answer · answered Oct 04 '19 at 17:40

this.props.section is going to be an Object like :

{
    id: 1, title: 'Starters', menuItem: [{
    id: 1,
    name: 'Meatball',
    description: 'Large Meatball',
    price: '11 meatballs'
    }]
}

So you can't .map it ,

either you pass the array :

{
    this.state.menuSections.map(menuSection => (
        <MenuSection 
            section={menuSection.menuItem} 
            id={menuSection.id} 
            title={menuSection} 
            mobileMode={this.state.mobileMode} 
        />
    ))
}

Or, you map the array inside :

{
    this.props.section.menuItem.map((itemContainer, i) => (
        <ItemContainer 
            styles={styles} 
            image={imageFood1} title={itemContainer.menuItem[i].name}
            description={itemContainer.menuItem[i].description}
            price={itemContainer.menuItem[i].price} 
        />
    ))
}

Perfect! I found it's also necessary to remove the .menuItem[i] from each reference. Works great now though, thank you. — Digglit, Oct 04 '19 at 17:50

score 0 · Answer 2 · answered Oct 04 '19 at 17:43

0

Section is an Object.

this.props.section.menuItem.map()

answered Oct 04 '19 at 17:43

MR.QUESTION

359
2
9

props.array.map is not a function

2 Answers2