Cannot read property 'map' of undefined reactjs

Question

I am using fabric-react commandBar component with the same code given here: fabric-ui-commandbar

but i am getting following error at run-time.

Uncaught TypeError: Cannot read property 'map' of undefined

And my code is as follows:

import * as React from 'react';
import { assign } from 'office-ui-fabric-react/lib/Utilities';
import { CommandBar } from 'office-ui-fabric-react/lib/CommandBar';
import { Toggle } from 'office-ui-fabric-react/lib/Toggle';

export class MyPage extends React.Component<any, any> {

  constructor(props: any) {
    super(props);
    this.state = {
      isSearchBoxVisible: true,
      areNamesVisible: true,
      areIconsVisible: true
    };
  }

  public render() {
    let { items, farItems } = this.props;
    let { isSearchBoxVisible: searchBoxVisible, areIconsVisible: iconsVisible, areNamesVisible: namesVisible } = this.state;

    let filteredItems = items.map(item => assign({}, item, {
      name: namesVisible ? item.name : '',
      icon: iconsVisible ? item.icon : ''
    }));

    let filteredFarItems = farItems.map(item => assign({}, item, {
      name: namesVisible ? item.name : '',
      icon: iconsVisible ? item.icon : ''
    }));

    return (
      <div>
        <Toggle
          label='Show search box'
          checked={ searchBoxVisible }
          onChanged={ isSearchBoxVisible => this.setState({ isSearchBoxVisible }) }
          onText='Visible'
          offText='Hidden'
        />
        <Toggle
          label='Show names'
          checked={ namesVisible }
          onChanged={ areNamesVisible => this.setState({ areNamesVisible }) }
          onText='Visible'
          offText='Hidden' />
        <Toggle
          label='Show icons'
          checked={ iconsVisible }
          onChanged={ areIconsVisible => this.setState({ areIconsVisible }) }
          onText='Visible'
          offText='Hidden' />
        <CommandBar
          isSearchBoxVisible={ searchBoxVisible }
          searchPlaceholderText='Search...'
          elipisisAriaLabel='More options'
          items={ filteredItems }
          farItems={ filteredFarItems }
        />
      </div>
    );
  }
}

Please help me what is the problem with this? I have installed Fabric React NPM package.

The items and farItems are coming in the props from a parent component. Where is it? — paqash, Mar 09 '17 at 11:30
it can be in assign component. I dont know more about this and react too — Hardik Chaudhary, Mar 09 '17 at 11:34
Possible duplicate of [Cannot read property 'map' of undefined](http://stackoverflow.com/questions/24706267/cannot-read-property-map-of-undefined) — Hardik Modha, Mar 09 '17 at 15:19

score 1 · Accepted Answer · answered Mar 09 '17 at 11:38

1

I think the issue is that your props items and farItems are not arrays. This could be because they are genuinely not arrays, or that when the component first loads the data hasn't been loaded yet, so the props are undefined.

A simple fix to the data having not loaded is to provide defaults for these props. Try something like let { items = [], farItems = [] } = this.props; inside your render method.

answered Mar 09 '17 at 11:38

spirift

2,994
1
13
18

1

i tried this but it gives me nothing. An error is removed. – Hardik Chaudhary Mar 10 '17 at 05:41

Cannot read property 'map' of undefined reactjs

1 Answers1