onChange event doesn't return the first change of the text input but works on subsequent changes. Sorry if this is obvious, I'm new to React.
import React, { useState } from 'react';
import axios from 'axios';
function Header() {
const [text, setText] = useState("");
const [location, setLocation] = useState("");
function handleChange(event) {
setText(event.target.value);
}
// when submit button clicked, current state of the text input is stored inside location constant
function handleClick() {
setLocation(text);
const geoCoderURL = "http://api.openweathermap.org/geo/1.0/direct?q=" + location + "&limit=5&appid={apikey}"
function getCoordinates(url) {
axios.get(url).then((response) => {
const locationLat = response.data[0].lat;
const locationLon = response.data[0].lon;
});
}
getCoordinates(geoCoderURL);
}
return (
<div>
<h1>Five Day Forecast</h1>
<input onChange={handleChange} type="text" name="name"autoFocus placeholder="Enter location here."/>
<button type="submit" onClick={handleClick}>Forecast</button>
</div>
)
}
export default Header;
When you call setLocation(text);, handleClick will finish execution before the location value is actually updated.
There is no need for location and setLocation; looks like maybe location is supposed to be the same as text.
function handleClick() {
const geoCoderURL = "http://api.openweathermap.org/geo/1.0/direct?q=" + text + "&limit=5&appid={apikey}"
function getCoordinates(url) {
axios.get(url).then((response) => {
const locationLat = response.data[0].lat;
const locationLon = response.data[0].lon;
});
}
getCoordinates(geoCoderURL);
}