How to add data on keplergl React from database

Question

I'm working with keplergl and I'd like to retrieve data from my database but kepler can't detect my data despite receiving an object in my console.

Receiving my object in my console

What should I do? thank you in advance

const reducers = combineReducers({
  keplerGl: keplerGlReducer
});

const store = createStore(reducers, {}, applyMiddleware(taskMiddleware));

export default function App() {
  return (
    <Provider store={store}>
      <Routes />
      <Map />
    </Provider>
  );
}

Fetch + json + map

function Map() {

  
  
  console.log("data", data)

configure parameters

  React.useEffect(() => {
    if (data) {
      dispatch(
        addDataToMap({
          datasets: {
            info: {
              label: "COVID-19",
              id: "covid19"
            },
            data:data
          },
          option: {
            centerMap: true,
            readOnly: false
          },
          config: {

          }
        })
      );
    }
  }, [dispatch, data]);

KeplerGl Component

  return (
    
    <KeplerGl
      id="covid"
      mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_API}
      width={window.innerWidth}
      height={window.innerHeight}
    />
    
  );
}

Answer 1

you can find a tutorial on how to dynamically update a dataset with new data here: http://vis.academy/#/kepler.gl/3-load-config

please see section "2. Replace an existing dataset with new data with the same format, keeping the current config."