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
– paqash, Commented Mar 9, 2017 at 11:30
it can be in assign component. I dont know more about this and react too — Hardik Chaudhary
– Hardik Chaudhary, Commented Mar 9, 2017 at 11:34
Possible duplicate of Cannot read property 'map' of undefined — Hardik Modha
– Hardik Modha, Commented Mar 9, 2017 at 15:19

spirift · Accepted Answer · 2017-03-09 11:38:43Z

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 9, 2017 at 11:38

spirift

3,0721 gold badge16 silver badges20 bronze badges

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

1 Comment

Hardik Chaudhary Over a year ago

i tried this but it gives me nothing. An error is removed.

Collectives™ on Stack Overflow

Cannot read property 'map' of undefined reactjs

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related