MapContainer map prop undefined

[dirodriguezm]

Hi, I'm sorry if this question is too dumb but I've been struggling with the autocomplete example for days.

The autocomplete example has this function:

renderAutoComplete() {
    const { google, map } = this.props;

    if (!google || !map) return;
    ...
    /*
     Rest of the function here
    */
}

but in my code, this.props is: {apiKey: "API_KEY", loaded: true, google: Object}

Here you can see my code: https://codesandbox.io/s/vw39jx5n5

Please help me understand what is this map prop and what is going on with the autocomplete example.

[auser]

The map prop is handled down by the Map component. Are you sure that's your code? It looks pretty much identical to the default one... did you save your code?

You need to make sure you wrap the <AutoComplete /> component as a child of the <Map /> component.

[dirodriguezm]

@auser Hi thanks for your answer. Yes that is my code, it's the same as the default, the function renderAutoComplete is the function from the example. Anyway I got it working calling that function with the onReady property of the <Map/> component, but that forces me to have a form with an <input> item inside the MapComponent class.

But you mentioned an <AutoComplete/> component as child, how do I create such component ? I need to make a SearchBar inside another component and make the Map change its location. (The search input has to be outside MapComponent)

[amaldonadoec]

any solution?, please.

[auser]

The component needs access to the map object. You can wrap the components in a map but only render the map in a smaller component. Would that work for you?

[amaldonadoec]

@auser thanks, It worked correctly.

[OscarCanek]

I'm getting the following error:

InvalidValueError: not an instance of HTMLInputElement
TypeError: Cannot read property 'activeElement' of undefined

I'm using the following component Ant Design Auto-Complete

Could you help me?