Estoy tratando de aprender a reaccionar.
Según lo que escribo en el campo de entrada, la temperatura debería cambiar en consecuencia, pero no puedo encontrar cuál es el mejor método para hacerlo.
Mi lógica me dice que coloque setDegrees debajo de la función inputChange para que cuando escriba una nueva ciudad el clima también cambie, pero no puedo hacerlo porque los datos que estoy tratando de obtener no son globales.
import React, {useState, useEffect} from 'react' import axios from 'axios'; import City from './components/City'; function App() { const [city, setCity] = useState("Rome") const [degrees, setDegrees] = useState("") useEffect(() => { const options = { url: 'https://weatherapi-com.p.rapidapi.com/current.json', params: {q: city}, headers: { 'X-RapidAPI-Host': 'weatherapi-com.p.rapidapi.com', 'X-RapidAPI-Key': '---' } }; axios.request(options).then(res => { setDegrees(res.data.current.temp_c) }).catch( error => console.log(error)) },[]) const inputChange = e => { setCity (e.target.value) } return ( <div> <input type="text" placeholder='Type the city' onChange={inputChange}/> <City city = {city} degrees = {degrees} /> </div> ) } export default AppLe falta una lógica en la que vuelve a obtener resultados sobre el cambio de ciudad, hay muchas maneras de abordarlo, aquí hay un ejemplo simple (búsqueda diferida):
function App() { const [city, setCity] = useState("Rome"); const [degrees, setDegrees] = useState(""); const fetchDegrees = (city) => { const options = { url: "https://weatherapi-com.p.rapidapi.com/current.json", params: { q: city }, headers: { "X-RapidAPI-Host": "weatherapi-com.p.rapidapi.com", "X-RapidAPI-Key": "---", }, }; axios .request(options) .then((res) => { setDegrees(res.data.current.temp_c); }) .catch((error) => console.log(error)); }; useEffect(() => { fetchDegrees(); }, []); const inputChange = (e) => { setCity(e.target.value); }; return ( <div> <input type="text" placeholder="Type the city" onChange={inputChange} /> <button onClick={() => fetchDegrees(city)}>Search city</button> <City city={city} degrees={degrees} /> </div> ); }