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,
};

Answer 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}
                    />
                )
            }
        );
    }
}