What am I missing - Uncaught TypeError: Cannot read property 'map' of undefined

I have the following two files and when I put the <CountryList/> on any page I get an error: Uncaught TypeError: Cannot read property 'map' of undefined - any ideas?

CountryContainer.jsx:

import {composeWithTracker} from 'react-komposer'
import CountryList from 'common/client/components/list/CountryList.jsx'
import Countries from 'common/collections/Countries'

function composer(props, onData) {
  if (Meteor.subscribe('countries').ready()) {
    const countries = Countries.find({}).fetch()
    onData(null, {countries})
  };
};

export default composeWithTracker(composer)(CountryList)

CountryList.jsx:

import React from 'react';

const CountryList = ({countries}) => (
  <div>
    This is the country list: <br/>
    <ul>
      {countries.map((_id, country) => (
        <li key={_id}>
          <h3>{country}</h3>
        </li>
      ))}
    </ul>
  </div>
);

export default CountryList;

[clayne11]

When your if statement evaluates to false you don’t return any data thus countries is null. You cannot map over a null value. If you change your CountryList to have a default value it will work:

const CountryList = ({countries = []}) => (
  <div>
    This is the country list: <br/>
    <ul>
      {countries.map((_id, country) => (
        <li key={_id}>
          <h3>{country}</h3>
        </li>
      ))}
    </ul>
  </div>
);

[ntinykumar]

I am using out of the box SPFX list form modern reach js webpart and it was running well earlier on the sharepoint site online. Suddently it has started showining error. “TypeError: Cannot read property ‘map’ of undefined”. can anyone tell me the fix of this ? Can git hub has updated there online libraries and this issues is causing error due to that. Git hub please fix the issues and get it work again.