I need to place coordinates from Mongodb on a map with reactJS

Question

I’m creating a google maps heat map with reactjs, I was able to implement it and pass the coordinates manually, but I need to create the coordinates dynamically coming from the bank in Mongodb, on the positions part, I’m having trouble putting the data coming from the database and the code reading it as coordinates instead of reading it as an array. If I have any number in the array it works but only from one to one, I need it to list all latitudes and longitudes and create all points at once. follows the code with the coordinates entered manually (so it works statically)

import React, { Component } from 'react';
import Map from './mapa';

const data = [
  { lat: -23.532881, lng: -46.792004 },
  { lat: -23.532200, lng: -46.781681 },
  { lat: -23.532681, lng: -46.782104 },
  { lat: -23.532281, lng: -46.792084 },

  { lat: -23.532881, lng: -46.792005 }
];
 
export default class IndexMapa extends Component {
  render() {
    return (    <React.Fragment>
      <Map center={{ lat: -23.532881, lng: -46.792004 }} zoom={14} positions={data} />
      </React.Fragment>);
  }
}

I need this constant date to be dynamic with the points I have on Mongodb. follows the code I have but is returning only 1 coordinate (only 1 point on the map). Obs. if I do not set a number in lat and lng, the code returns an array and no point appears on the map.

    import React, { Component } from 'react';
    import Map from './mapa';
    import api from '../../../services/api'; 
    // const data = [];
    export default class IndexMapa extends Component {
      constructor(props) {
        super(props);
        this.state = {
        position:[]
        } 
      }
    
      async componentDidMount() {
        await api.get('/api/clientes.coordenada').then(res => {
             const local = res.data;
             let lng = [];
             let lat = [];
             local.forEach(element => {
               lat.push(element.lat);
               lng.push(element.lon);
              });
              //  console.log(local);   
          this.setState({ 
            position: [ 
              {lat: lat[0], lng: lng[0]}
            ]   
          });
        });
        // console.log(this.state.position);
      }
      render() {
        return (   
          <React.Fragment>
          <Map center={{ lat: -23.532881, lng: -46.792004 }} zoom={14} positions={this.state.position} />
          </React.Fragment>);
      }
    }

thank you in advance.

Answer 1

Follow the code with some small adjustments such as "mat" for "m" and the variable "log" for "Lon"

import React, { Component } from 'react';
import Map from './mapa';
import api from '../../../services/api';
// const data = [];
export default class IndexMapa extends Component {
  constructor(props) {
    super(props);
    this.state = {
      position: [],
     
    }
  }

  componentDidMount() {
    api.get('/api/clientes.coordenada')
        .then(res => {
            const local = res.data; 
            console.log(res.data);  
            this.setState({ 
                position: res.data.map(m => { return {
                        lat: m.lat,    
                        lng: m.lon    
                    }}) 
            });
    });
  }
  render() {
    return (<React.Fragment>
      <Map center={{ lat: -23.532881, lng: -46.792004 }} zoom={14} positions={this.state.position} />
    </React.Fragment>);
  }
}

Answer 2

In the method componentDidMount() make the following changes:

componentDidMount() {
    api.get('/api/clientes.coordenada')
        .then(res => {
            const local = res.data; 
            this.setState({ 
                position: rest
                    .data
                    .map(m => { return {
                        lat: m.lat, 
                        lng: mat.log
                    }}) 
            });
    });
}

note that when trying to use async/await do not use then, because the promisse and returned, in your case I prefer to return by then and consolidate the information of the new state for the variable position which is a array. Another factor that was done in the code is to put only the information of lat and lng according to your comments with the method map creating a new array with the expected organization.