Reactjs updated prop is not shown

Question

I tried to create a interactable map following this example here: https://docs.mapbox.com/mapbox-gl-js/example/cluster/

In my componentDidMount (where I create a mapboxgl) I implemented clickable markers, when clicked on the markers a popup appears which displays various informations.

After the click I want to call a second function (fetch) to get more data on that specific marker: this.props.getData(id); I then want to display these data in the same popup as the other information.

My problem is that this.props.testdata is empty on the first click. If I double-click on the marker, the data appear. So my guess is that my component does not notice the change of the state/prop and therefore does not update?

How do I do that or what am I missing?

Map.js

 this.map.on('click', 'unclustered-point', (e) => {

            const coordinates = e.features[0].geometry.coordinates.slice();

            const id = e.features[0].properties.id;
            const infos = e.features[0].properties.infos;

            while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
                coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
            }

            if (id == null) {
                console.log("Missing id, cant get informations")
                return;
            }

            this.props.getData(id);

            new mapboxgl.Popup()
                .setLngLat(coordinates)
                .setHTML(
                    `
                    Id: ${id}
                        <br>
                     Infos: ${infos}
                        <br>
                        <br>
                     Testdata: ${this.props.testdata}
                    `
                )
                .addTo(this.map);
        });

        this.map.on('mouseenter', 'clusters', () => {
            this.map.getCanvas().style.cursor = 'pointer';
        });
        this.map.on('mouseleave', 'clusters', () => {
            this.map.getCanvas().style.cursor = '';
        });
    });

App.js (getData function):

getData = (id) => {
  if (id== null) {
      console.log("Missing id")
      return;
  }

const {mapCenter, startDate, endDate} = this.state;
const neo4j = require('neo4j-driver')
const driver = neo4j.driver('bolt://xxx', neo4j.auth.basic("xx", "xx-xx"))
const session = driver.session()

session
    .run('Here goes a neo4j cypher statment',{id: id})
    .then((results)=> {

      const data= [];
      results.records.forEach((record) => data.push([record.get("r"), record.get("n"), record.get("b")]))
   
      this.setState({
        data
      });

      session.close()
      driver.close()
    }).catch(e => {
      console.log(e)
      session.close();
    });

};

Answer 1

I have not yet managed to fix the original problem.

However, I have found another solution:

In my Map.js I'm calling the this.props.testdata in th UI like this:

 <div className="sidebar">
   info: {JSON.stringify(this.props.testdata)}
 </div>