How to display markers from array in reactjs using leaflet charts

Question

I have one array with three indexes - ID , LAT, LNG. I want to get LAT & LNG from my array and set the values on my marker. For the first index I want to display a PopUp.

I use leaflet charts for reactjs.

The code:

import './App.css';
import React from 'react'
import { Map as LeafletMap, TileLayer, Marker, Popup } from 'react-leaflet';


class Map extends React.Component {
  constructor() {
    super()
    this.state = {
      coords: [
[1, 41.19197, 25.33719],
[2, 41.26352, 25.1471],
[3, 41.26365, 25.24215],
[4, 41.26369, 25.33719],
[5, 41.26365, 25.43224],
[6, 41.26352, 25.52728],
[7, 41.2633, 25.62233],
[8, 41.263, 25.71737],
[9, 41.30828, 22.95892],
[10, 41.31041, 23.054],
      ],
      zoom: 7
    }
  }

  render() {


    const position = [this.state.coords];
    return (
      <LeafletMap center={[42.733883, 25.485830]} zoom={this.state.zoom}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url='https://{s}.tile.osm.org/{z}/{x}/{y}.png'
        />

        <Marker position={position}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
      </LeafletMap>
    );
  }
}


export default Map

The error is: TypeError: latlng is null

How can I set the first and the second indexes on my marker and zero index on popup ?

Answer 1

Iterate over the array of objects using map and catch the first item using map index. You do not need to store the index inside the coords array:

this.state = {
      coords: [
        { lat: 41.19197, lng: 25.33719 },
        { lat: 41.26352, lng: 25.1471 },
        { lat: 41.26365, lng: 25.24215 },
        { lat: 41.26369, lng: 25.33719 },
        { lat: 41.26365, lng: 25.43224 },
        { lat: 41.26352, lng: 25.52728 },
        { lat: 41.2633, lng: 25.62233 },
        { lat: 41.263, lng: 25.71737 },
        { lat: 41.3082, lng: 22.95892 },
        { lat: 41.31041, lng: 23.054 }
      ],
      zoom: 7
    };   

 ....

In the render function:

  {coords.map(({ lat, lng }, index) => (
      <Marker position={[lat, lng]} icon={customMarker} key={index}>
          <Popup>
            {index + 1} is for popup with lat: {lat} and lon {lng}
          </Popup>
      </Marker>
    ))}

Demo