reactjs ToDo List- Uncaught TypeError: Cannot read property 'map' of undefined

Question

I'm following the ReactJS tutorial (http://redux.js.org/docs/basics/UsageWithReact.html) for the basic todo list and tweaking it to my liking, but am running into the following error:

Uncaught TypeError: Cannot read property 'map' of undefined

Here is the code:

ConfigList.js -

import React, {Component, PropTypes} from 'react';
import ConfigItem from '../components/ConfigItem';


const ConfigList = ({ configs }) => (
  <ul>
    {configs.map(config =>
      <ConfigItem
        key={config.id}
        />
    )}
  </ul>
);

ConfigList.propTypes = {
  configs: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.number.isRequired,
    text: PropTypes.string.isRequired
  }))
};

export default ConfigList;

ConfigItem.js -

import React, { PropTypes } from 'react';

const ConfigItem = ({ text }) => (
  <li>{text}</li>
);

ConfigItem.propTypes = {
  text: PropTypes.string.isRequired
};

export default ConfigItem;

I'm new to ReactJS and somewhat new to Javascript so I'm hoping I get some feedback as to why I'm seeing this error, and what steps I can take to get past it.

Where is the code that creates a ConfigList component instance? — Yosef Weiner
– Yosef Weiner, Commented May 9, 2016 at 5:37

whostolemyhat · Accepted Answer · 2016-05-09 08:35:16Z

2

The error Cannot read property 'map' of undefined is saying that you're trying to call map() on something which doesn't exist. The only place you're calling map() is in ConfigList:

{configs.map(config =>
  <ConfigItem
    key={config.id}
    />
)}

which suggests that the configs variable hasn't been set when you're trying to call map(). Since ConfigList is a functional React component, configs is expected to be passed in as part of the props object, but it doesn't look like this is being set.

You'll need to check the code where you're calling <ConfigList /> to make sure you are setting configs; it should look a bit like

<ConfigList configs={ myConfigs } />

answered May 9, 2016 at 8:35

whostolemyhat

3,1194 gold badges36 silver badges50 bronze badges

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

Collectives™ on Stack Overflow

reactjs ToDo List- Uncaught TypeError: Cannot read property 'map' of undefined

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