Get input value of react-geosuggest input field

user_5769544 0
Viewed 1626

I'm using react-geosuggest and for some reason, the value of the Geosuggest input field doesn't get collected when I submit the form. The Geosuggest input field contains the name= in the input field same way my other input fields do yet the value always comes back empty. Any suggestions.

export default class ContactDetails extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      'name.first': '',
      'address.fullAddress': '',
    };

    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  handleSubmit(event) {
    event.preventDefault();

    var data = {
      'name.first': this.state['name.first'],
      'address.fullAddress': this.state['address.fullAddress'],
    };

    console.log("data: ", data);

  }

  render() {
    return (
      <form onSubmit={this.handleSubmit} noValidate>
        <Geosuggest
          name="address.fullAddress"
          placeholder="Full address"
          value={this.state['address.fullAddress']}
          onChange={this.handleInputChange}
          initialValue={this.state['address.fullAddress']}
          location={new google.maps.LatLng(25.2744, 133.7751)}
          radius="0"
        />

        <input
          name="name.first"
          type="text"
          value={this.state['name.first']}
          onChange={this.handleInputChange}
          className={this.state.errors['name.first'] ? "validate invalid" : "validate" }
        />

        <button className="btn waves-effect waves-light" type="submit" name="action">
          Save
        </button>  
      </form>
    )
  }
}
meteor reactjs
2 Answers

I came across this and felt that this needed a bit of an elaboration for clarity to build upon the comment left in the first answer.

The correct prop that needs to be passed into the <geosuggest /> Component is onSuggestSelect() in order to capture the value of the suggestion selected instead of the values typed into the field.

You need to create a method that will handle the address label values that you want to store in state and you will need to bind this method in the constructor as follows, for simplicity I am calling the method selectSuggestion():

constructor(props) {
  super(props);
  this.state = {
    address: ""
  }

  this.selectSuggestion = this.selectSuggestion.bind(this);
}

selectSuggestion() is tricky because you need to take into account the edge case when the user wants to delete an initial entry to restart. When the user deletes the first letter, you can inadvertently set the state of the attribute to null which would cause your app to crash. You should handle this case in the following manner:

selectSuggestion(suggestion) {
  try {
    this.setState({
      address: "suggestion.label"
    });
  } catch (e) {
    this.setState({
      address: ""
    });
  }
}

Once the above is established, then you can go ahead and use the react-geosuggest component accordingly:

<Geosuggest placeholder="Enter Address!"
  ref={ el => this._geoSuggest = el }
  onSuggestSelect={ this.selectSuggestion }
/>

Don't forget to add the CSS mentioned in the docs!

That's what I did, hope that helps someone.

user_38793590
Related