TypeError: data.map is not a function in JavaScript

Question

I have this message in browser: TypeError: data.map is not a function

I am passing an array from another component here as props. What I am doing wrong? Thank you in advance!

I guess it can be connected with export default eventData so that eventdata can be object but not array in this case

event-data.js

const months = ['January', 'February', 'March'];
const eventType = ['Party', 'Karaoke', 'Concert'];

const monthObject = [
  { id: 'sort-by-month' },
  { name: 'By month' },
  { values: months },
];

const eventObject = [
  { id: 'sort-by-category' },
  { name: 'By category' },
  { values: eventType },
];

const eventData = { monthObject, eventObject };


event-filter-bar.js

import eventData from '../../data/event-data';

class EventFilterBar extends React.Component {
  render() {
    return (
      <FilterToolbar data={eventData} />
    );
  }
}

event-filter-bar.js

import eventData from '../../data/event-data';

class EventFilterBar extends React.Component {
  render() {
    return (
      <FilterToolbar data={eventData} />
    );
  }
}

filter-toolbar.js

class FilterToolbar extends Component {
  render() {
    const { data } = this.props;
    return (
      <ButtonToolbar className="justify-content-center">
        <DropdownMaker data={data} />
        <DropdownWithDate />
        <ResetButton />
      </ButtonToolbar>
    );
  }
}

FilterToolbar.propTypes = {
  data: PropTypes.array.isRequired,
};

dropdown-maker.js

class DropdownMaker extends Component {
  render() {
    const { data } = this.props;
    const eventFilters = data.map((e) => (
      <DropdownMenu
        id={e.id}
        name={e.name}
        values={e.values}
        key={e.id}
      />
    ));
    return (
      { eventFilters }
    );
  }
}

DropdownMaker.propTypes = {
  data: PropTypes.array.isRequired,
};

data is not an Array in that expression. Find out why and verify assumptions. — user2864740
– user2864740, Commented Mar 17, 2020 at 17:38
eventData = { ... }, so we don't expect eventData to have a map method. Did you want to make an array with two elements, monthObject and eventObject, or something else? Also, I strongly suspect you meant to make monthObject and eventObject each objects with three properties instead of array of one-property objects. — apsillers
– apsillers, Commented Mar 17, 2020 at 17:42

Sajeeb Ahamed · Accepted Answer · 2020-03-17 18:13:26Z

1

The monthObject and eventObject are same data structure. So you can make an array of an object by combining these two, and export the array not object of two array at event-data.js. So your event-data.js should look like-

const months = ['January', 'February', 'March'];
const eventType = ['Party', 'Karaoke', 'Concert'];

const eventData = [
    {
        id: 'sort-by-month',
        name: 'By month',
        values: months
    },
    {
        id: 'sort-by-category',
        name: 'By category',
        values: eventType 
    }
];

export default eventData;

Now you have the data array and map should work now.

Update Update the DropdownMaker as

class DropdownMaker extends Component {
    render() {
        const { data } = this.props;
        return (
            data && data.length > 0 && data.map(e => {
                return (
                    <DropdownMenu
                        id={e.id}
                        name={e.name}
                        values={e.values}
                        key={e.id}
                    />
                )
            }
        );
    }
}

edited Mar 17, 2020 at 18:13

answered Mar 17, 2020 at 17:52

Sajeeb Ahamed

6,4382 gold badges23 silver badges36 bronze badges

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

5 Comments

Robert Gurjiev Over a year ago

Thank you, I have done so. But even now I see Error: Objects are not valid as a React child (found: object with keys {eventFilters}). If you meant to render a collection of children, use an array instead.

Robert Gurjiev Over a year ago

I guess 'export default eventData' exports object but not array

Robert Gurjiev Over a year ago

it works! thanx a lot! i want to ask you to describe what this line means (i don't understand bold ones)? data && data.length > 0 && data.map

Sajeeb Ahamed Over a year ago

It's just a security check if the data really exists and populated or not. If exists then map through it, otherwise return null.

Sajeeb Ahamed Over a year ago

What you did before by returning this { eventFilters } is returning an object. You just needed to remove the curly-braces from the eventFilters I think.

Collectives™ on Stack Overflow

TypeError: data.map is not a function in JavaScript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related