Как динамически «захватить» входное значение для размещения внутри URL API?

Question

Вы обнаружите, что я пытаюсь настроить URL-адрес API внутри функции handleGetWeather, чтобы включить {city}, который кто-то печатает на входе (city - это значение поля ввода в jsx по направлению к нижней части показанного кода).Затем я просто хочу console.log мои данные после вызова API.

Я протестировал эту функцию путем жесткого кодирования URL-адреса с названием города и могу успешно получить данные из API и console.log it.Так что это просто вопрос динамического захвата этого города из ввода, чтобы иметь возможность создать URL для любого города, который введен в поле ввода.Текущие попытки включали попытки заменить {city} в URL-адресе {value}, а также this.city и this.value, но это не были распознанные значения.

Так что мой вопрос, как мне динамически захватитьэто входное значение, чтобы я мог включить его в свой URL?

Спасибо за помощь.

handleCityInput(event) {
 const { dispatch } = this.props;
 const { value } = event.target;
 dispatch(updateCity(value));
}

handleGetWeather(value) {
 const { dispatch } = this.props;
 axios
 .get('http://api.openweathermap.org/data/2.5/weather?q='+{city}+'&APPID=API')
 .then(response => console.log(response.data))
 dispatch(updateWeather(value));
}

  render() {
    const { city } = this.props;
    return (
      <div>
        <div className="btn-group">
          <button type="button" className="btn btn-secondary">San Diego</button>
          <button type="button" className="btn btn-secondary">New York</button>
          <button type="button" className="btn btn-secondary">Washington D.C.</button>
          <button type="button" className="btn btn-secondary">London</button>
          <button type="button" className="btn btn-secondary">Tokyo</button>
        </div>
        <div className='input-group'>
        <input id="city" value={city} onChange={this.handleCityInput} className='form-control' type='text' placeholder='Enter a City' />
        <span className='input-group-btn'>
          <button className='btn btn-secondary' onClick={this.handleGetWeather}>Go!</button>
        </span>
        </div>
      </div>