Cannot set circle picker programmatically after fetch

[ikhaled-ali]

good day Mr.

i'm trying to display map on an UPDATE PAGE so i need to get saved position from server then re-locate the cirlcePicker with the new state for this reason i use fetch in componentDidMount ( also trying componentWillMount ) but map never change the default state ( initial state )

<LocationPicker containerElement={<div style={{height: '100%'}}/>} mapElement={<div style={{height: '400px'}}/>} defaultPosition={this.state.position} onChange={this.handleLocationChange} />

can you help me please ?

[rameshsyn]

@ikhaled-ali Hello, thanks for the issue. It's a location picker component issue. I will fix it in v1.1.4.

[rameshsyn]

@ikhaled-ali It's fixed, update to v1.1.4

[ikhaled-ali]

@rameshsyn Sorry for inconvenience .. but still not working after update .. i'm also trying change it via click event but nothing was happen :(

[rameshsyn]

It should have worked. Can you make sure react-location-picker version is v1.1.4 ? Can i see your fetch code ? :jack_o_lantern:

[ikhaled-ali]

class EditEvent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            error_page: "",
            position: {
                lat: 33.8199376507058,
                lng: 35.49130325317378
            },
            address: "Airport, Lebanon",
     }
   }
componentWillMount() {
    PostData("getEvent", event_id).then((repos) => {
                    // event not found
                    if (repos.ev_number === "NULL") {
                        this.showNotification("br", "danger", "ERROR", "Event not found!");
                        this.setState({event_id: 0, error_page: (<ErrorForm/>)});
                    } else { // event found
                        this.setState({event_id: event_id});
                        // set states values
                       position.lat = repos.position.lat;
                       position.lng = repos.position.lng;
                       address = repos.address;
                        this.setState({formData: initialFormData, position: position, address: address});
                    }
                }
}

}

Render :

<LocationPicker
                                                        containerElement={<div style={{height: '100%'}}/>}
                                                        mapElement={<div style={{height: '400px'}}/>}
                                                        defaultPosition={this.state.position}
                                                        onChange={this.handleLocationChange}
                                                    />

[rameshsyn]

@ikhaled-ali looks ok, latitude and longitude should be number. don't forget to coerce it to number in case it's number. Is there any error in your browser console ? also make sure to include google map api key.

[rameshsyn]

@ikhaled-ali Here's demo for default position change https://codesandbox.io/s/qljl8y8nwq hope it help you. You can update to v1.2.4, it's got two new features. :ship: