Inserting a variable inside weather app link using Axios - reactjs

Question

I am using a weather app API to create a weather application.
I was able to reach the point that I could've print the weather if I hard coded the country in the link given.
My aim was to :
1 - Print the value of the city when I write it in the input and take the value and insert it in the link.
2 - unfortunately I couldn't do that [the point i reached is that I could get the input, but it won't accept it in the link]
Hint: I am a React beginner and trying my best to make my code work and using the DRY principle.
I appreciate your time and could use your help here.
Thanks in advance.
//Importing
import React, { Component } from "react";
import axios from "axios";
//syntax
let inputValue = "";
console.log(" input value before updated", inputValue);
export default class main extends Component {
state = {
showList: false,
data: "",
temp: "",
feels_like: "",
humidity: "",
pressure: "",
name: "",
country: "",
description: "",
icon: "",
weather: "",
};
//Component Did mount
handleInput = (event) => {
this.setState({
data: event.target.value,
});
};
submitted = () => {
inputValue = this.state.data;
const show = this.state.showList;
this.setState({ showList: !show });
};
componentDidMount() {
axios
.get(
`http://api.openweathermap.org/data/2.5/weather?q=${inputValue},uk&APPID=xxxxxxxxxxxxxxxxx`
)
.then((response) => {
this.setState({
temp: response.data.main.temp,
feels_like: response.data.main.feels_like,
humidity: response.data.main.humidity,
pressure: response.data.main.pressure,
name: response.data.name,
country: response.data.sys.country,
description: response.data.weather[0].description,
icon: response.data.weather[0].icon,
weather: response.data.weather[0].main,
});
})
.catch((error) => console.log(error));
}
render() {
let feels_like = this.state.feels_like;
let temp = this.state.temp;
let humidity = this.state.humidity;
let pressure = this.state.pressure;
let name = this.state.name;
let country = this.state.country;
let description = this.state.description;
let icon = this.state.icon;
let weather = this.state.weather;
let list = null;
if (this.state.showList) {
list = (
<div>
<h1>{this.state.data}</h1>
<h1>{feels_like}</h1>
<h1>{temp}</h1>
<h1>{humidity}</h1>
<h1>{pressure}</h1>
<h1>{name}</h1>
<h1>{country}</h1>
<h1>{description}</h1>
<img
alt=""
src={`http://openweathermap.org/img/wn/${icon}.png`}
></img>
<h1>{weather}</h1>
</div>
);
}
return (
<div>
<input
onChange={this.handleInput}
typw="text"
placeholder="Enter a country name"
/>
<button onClick={this.submitted}>Search</button>
{list}
</div>
);
}
}
Extra Info:
.get(
`http://api.openweathermap.org/data/2.5/weather?q=${inputValue},uk&APPID=xxxxxxxxxxxxxxxxx`
)
This is the part where I got 404 since it is not accepting the ${inputValue}

Answer 1

Make the inputValue part of the state. There is no reason to keep it as a global variable outside of the component like that.