Map() is not a function even though data is present React-Leaflet

Question

I am trying to recreate the React-Leaflet list of markers example. I have an array of objects that I'm sending to MarkerList to be turned into Fragments and rendered on the map. However my map function isn't working, using the browser debugging tool I know that the data is there, it's defining markers to have the array that I want but I keep getting the error that markers.map is not a function. Any nods in the right direction would be helpful.

const PopupMarker = content => (
  <Marker position={content.coords}>
    <Popup>{content.applicant}</Popup>
  </Marker>
);

const MarkerList = markers => {
  const items = markers.map(props => (
    <PopupMarker key={markers.id} {...props} />
  ));
  return <Fragment>{items}</Fragment>
};
class MyMap extends Component {

  static propTypes = {
    data: PropTypes.array,
  }

  state = {
    lat: 37.7749,
    lng: -122.4194,
    zoom: 13,
  }

  handleMapChange = () => {
    console.log('I work');
  }

  render() {
    const { data } = this.props;
    const position = [this.state.lat, this.state.lng];

    const southWest = L.latLng(37.713159, -122.527084);
    const northEast = L.latLng(37.814666, -122.365723);
    const bounds = L.latLngBounds(southWest, northEast);

    return (
      <Map 
        center={position} 
        maxBounds={bounds} 
        zoom={this.state.zoom} 
        style={{height: '30em', width: '75%'}}
        onMoveend={this.handleMapChange}
        onZoomend={this.handleMapChange}
      >
        <TileLayer
          attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        {data !== null &&
          <MarkerList markers={data} />
        }
      </Map>
    )
  }
}

Answer 1

const MarkerList = markers => {

TO

const MarkerList = {markers} => {

You need to access (by destructuring how I've implemented) the markers property of the props object you're passing to <MarkerList> component. This will give you the value of data that you assigned to it markers={data} . Right now you're trying to map() over the props argument, which is an Object not an Array.

But looking at your code further you likely need to rewrite this function entirely...

const MarkerList = markers => {
  const items = markers.map(props => (
    <PopupMarker key={markers.id} {...props} />
  ));
  return <Fragment>{items}</Fragment>
};

To something like ...

const MarkerList = {markers} => {
  const items = markers.map({id, ...rest} => (
    <PopupMarker key={id} {...rest} />
  ));
  return <Fragment>{items}</Fragment>
};

Given that we don't know the shape of the makers data I can't be positive this is the right solution, but one thing is for sure, if markers is an Array you won't be able to access the id property on it ( markers.id ).

Answer 2

In the render() method, you should handle the case when data is null. EX:

render() {
const { data } = this.props;
const position = [this.state.lat, this.state.lng];

const southWest = L.latLng(37.713159, -122.527084);
const northEast = L.latLng(37.814666, -122.365723);
const bounds = L.latLngBounds(southWest, northEast);
if(!data) { 
  return null;
}
return (
  <Map 
    center={position} 
    maxBounds={bounds} 
    zoom={this.state.zoom} 
    style={{height: '30em', width: '75%'}}
    onMoveend={this.handleMapChange}
    onZoomend={this.handleMapChange}
  >
    <TileLayer
      attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />
    <MarkerList markers={data} />
  </Map>
)

}