Getting User Input in React Js in Fetch statement - html

Question

I have created a code for fetching weather data from api. Here in the link, I have given a Place q=chennai. I need to change this place field depends on user. that is I want to get this location from user. How can I do this using react
import React,{useState,useEffect} from 'react';
const Home1=()=>{
const[info,setInfo]=useState({
name:"loading !!",
temp:"loading",
humidity:"loading",
desc:"loading",
})
useEffect(()=>
{
getWeather()
})
const getWeather=()=>
{
fetch('http://api.openweathermap.org/data/2.5/weather?q=chennai&appid=bd2d67a73f2dc8279......')
.then(data=>data.json())
.then(results=>{
//console.log(results)
setInfo({
name:results.name,
temp:results.main.temp,
humidity:results.main.humidity,
desc:results.weather[0].description,
})
})
}
return(
<div>
<h1>Weather API</h1>
<div>
Place:{info.name} <br/>
Temperature:{info.temp} <br/>
Humidity:{info.humidity} <br/>
Description: {info.desc}
</div>
</div>
)
}
export default Home1;```
Can somebody help me to do this ?

Answer 1

You have to take the input from the user and write a onChange event handler. Once you get the input you can call the getWeather function and pass the value you got from the user to the function. Here is the solution -
import React,{useState,useEffect} from 'react';
const Home1=()=>{
const[info,setInfo]=useState({
name:"loading !!",
temp:"loading",
humidity:"loading",
desc:"loading",
})
const [inputValue , setInputValue] = useState("");
useEffect(()=>
{
getWeather("chennai")
})
const getWeather=(value)=>
{
fetch(`http://api.openweathermap.org/data/2.5/weather?q=${value}&appid=bd2d67a73f2dc8279......`)
.then(data=>data.json())
.then(results=>{
//console.log(results)
setInfo({
name:results.name,
temp:results.main.temp,
humidity:results.main.humidity,
desc:results.weather[0].description,
})
})
}
const handleInputChange = event =>{
let inputValue = event.target.value;
console.log(event.target.value); // You will the value here. you can simply pass the value to the function
setInputValue(inputValue);
getWeather(inputValue);
}
return(
<div>
<h1>Weather API</h1>
<div>
Place:{info.name} <br/>
Temperature:{info.temp} <br/>
Humidity:{info.humidity} <br/>
Description: {info.desc}
<input type="text" value={inputValue} onChange={handleInputChange} />
</div>
</div>
)
}
export default Home1;

Answer 2

You can use a controlled input to gives to the user the possibility to choose the location.
const [city, setCity] = useState("chennai") // Initialize city default value
...
useEffect(()=> { getWeather(city) }, [city])
// Add the city as dependency to your effect and pass the value to getWeather method
...
fetch(`http://api.openweathermap.org/data/2.5/weather?q=${city}&appid=bd2d67a73f2dc8279......`)
// Make the url to fetch a template string so you can inject the city state in it
...
<input type="text" value={city} onChange={(e) => setCity(e.target.value)} />
// Add the input with onChange method
If you want to know more about controlled input in React this is the doc related page https://reactjs.org/docs/forms.html