React Geosuggest doesn't update state

Question

i'm trying to make a weather app, and using external component 'react-geosuggest'.

My problem is, when I update the input (SEE:onChange={this.onInputChange}), that function doesn't take my input, and don't change the state, i.e I get undefined.

What's interesting, i've set initialvalue to be New York, and on submit I get results, without changing input information, so problem lies in updating input information and passing it to function handleOnSubmit.

I've read docs about that component, but couldn't figure it out, it has same values as simple , but something doesn't work.

Thanks!

  class SearchBar extends Component {
    constructor() {
      super()

      this.state = {city: 'New York'};
    }

    onInputChange = (e) => {
      this.setState({city: e.target.value});
    }

       handleOnSubmit = (e) => {
       e.preventDefault();
      this.props.fetchWeather(this.state.city);
      this.setState({city: ''});
      }

render () {
  return (
    <div>
        <form onSubmit={this.handleOnSubmit}>
          <Geosuggest
            initialValue={this.state.city}
            onChange={this.onInputChange}
            types={['(cities)']}
          />
          <button type="submit">Search</button>
        </form>
      </div>
    </div>
      );
      }
}

score 0 · Answer 1 · edited May 23 '17 at 12:07

0

Use e.currentTarget.value instead. See this question for more on this.

Also try this:

onChange={this.onInputChange.bind(this)}

If you'd like to be more concise you can write it this way:

<Geosuggest
   initialValue={this.state.city}
   onChange={(e)=> this.setState({city: e.currentTarget.value})}
   types={['(cities)']}
   />

edited May 23 '17 at 12:07

Community

1
1

answered Nov 19 '16 at 09:34

Giwan

1,564
14
17

score 0 · Accepted Answer · answered Nov 19 '16 at 09:55

Bind the event on the constructor, set the value attribute in the render and remove the setState to empty string that you are doing in the handleOnSubmit event. I am afraid this last one is what it makes not working when you change the input.

class SearchBar extends Component {
        constructor(props) {
          super(props);
          this.state = {city: 'New York'};
          this.onInputChange = this.onInputChange.bind(this);
        }

        onInputChange = (city) => {
            this.setState({city: city});
        }

        handleOnSubmit = (e) => {
             e.preventDefault();
             this.props.fetchWeather(this.state.city);
        }

        render () {
          return (
            <div>
                <form onSubmit={this.handleOnSubmit}>
                  <Geosuggest
                    initialValue={this.state.city}
                    value={this.state.city}
                    onChange={this.onInputChange}
                    types={['(cities)']}
                />
             <button type="submit">Search</button>
            </form>
          </div>
        </div>
       );
      }
    }

score 0 · Answer 3 · answered Feb 27 '19 at 18:39

You can also get the value of selected address using onSuggestSelect:

<Geosuggest
  ref={el=>this._geoSuggest=el}
  placeholder="Search for address"
  onSuggestSelect={this.onSuggestSelect}
  country='us'
/>

Then access the components like so:

onSuggestSelect(suggest) {
  if (!suggest.gmaps) {
    return;
  }

  const components = suggest.gmaps.address_components;
  const address = {
    street: this.findAddressComponent(components, 'street_number', 'short_name') + ' ' + this.findAddressComponent(components, 'route', 'short_name'),
    city: this.findAddressComponent(components, 'locality', 'short_name'),
    state: this.findAddressComponent(components, 'administrative_area_level_1', 'short_name'),
    zip: this.findAddressComponent(components, 'postal_code', 'short_name'),
  }

  this.setState({
    address
  });
}

findAddressComponent(components, type, version) {
  const address = components.find(function(component) {
    return (component.types.indexOf(type) !== -1);
  });

  return address[version];
}

React Geosuggest doesn't update state

3 Answers3