1

I have my app running in React. I have installed a map with react-map-gl-geocoder, react-map-gl and mapbox-gl. I am creating a map application with React map GL, using the Geocoder for address search. The map works well. Now I need to be able to read the content that the user typed in the input address in my child component Map, so that I can update the state in my mother component App in the space that I created for it (this.state.answerOptionsInputs.Question1).

enter image description here I have tried passing a function on the onChange event of MapGL component and Geocoder component but it did not work.

Map.js
    <MapGL
            ref={mapRef}
            {...viewport}
            mapStyle="mapbox://styles/mapbox/streets-v9"
            width="100%"
            height="100%"
            onChange={ onSearchLocation }
            onViewportChange={handleViewportChange}
            mapboxApiAccessToken={MAPBOX_TOKEN}>
            <Geocoder
              mapRef={mapRef}
              containerRef={geocoderContainerRef}
              onViewportChange={handleGeocoderViewportChange}
              mapboxApiAccessToken={MAPBOX_TOKEN}
              position="top-left"
              onChange={ onSearchLocation }
            />
          </MapGL>

App.js

  handlerLocation(e) {
    const { value } = e.target;
        this.setState (prevState => {
          return {
            answerOptionsInputs: {
              ...prevState.answerOptionsInputs,
              Question1: value
            }
          }
        })   }

<Map onSearchLocation = { this.handlerLocation }/>

Thanks a lot in advance!!

coder1490
  • 11
  • 1

1 Answers1

0

could try

onResult={onSearchLocation }

instead of

onChange={ onSearchLocation }
Suraj Rao
  • 29,388
  • 11
  • 94
  • 103
elatedMarble
  • 1