change background image from parent with child data - reactjs

Question

im doing a weather app, and i need to change the background-image when the weather change.
in the parent i get my coords, and pass the coords to my weatherApp.jsx
(parent)
import { useEffect, useState } from 'react'
import './App.css'
import WeatherApp from './components/WeatherApp'
function App() {
const [coords, setCoords] = useState()
useEffect(() => {
const success = (pos) => {
const location = {
lat: pos.coords.latitude,
lon: pos.coords.longitude
}
setCoords(location)
}
navigator.geolocation.getCurrentPosition(success)
}, [])
console.log(coords);
return (
<div className="App">
<WeatherApp lon={coords?.lon} lat={coords?.lat}/>
</div>
)
}
export default App
in the child i use axios to get my data form openweathermap, but i need to change the background image from App.jsx
import axios from 'axios'
import React, { useEffect, useState } from 'react'
const WeatherApp = ({lon, lat}) => {
const [weather, setWeather] = useState()
const [temperature, setTemperature] = useState()
const [isCeslsius, setIsCeslsius] = useState(true)
useEffect(() => {
if (lat) {
const APIKey = "***"
const URL = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${APIKey}`
axios.get(URL)
.then(res => {
setWeather(res.data)
const temp = {
celsius: {
celsius_temp: `${Math.round(res.data.main.temp - 273.15)}°C`,
celsius_min: `${Math.round(res.data.main.temp_min - 273.15)}°C`,
celsius_max: `${Math.round(res.data.main.temp - 273.15)}°C`
},
farenheit: {
farenheit_temp: `${Math.round((res.data.main.temp - 273.15) * 9/5 + 32)}°F`,
farenheit_min: `${Math.round((res.data.main.temp_min - 273.15) * 9/5 + 32)}°F`,
farenheit_max: `${Math.round((res.data.main.temp_max - 273.15) * 9/5 + 32)}°F`
}
}
setTemperature(temp)
// trying to change the background image depending on the weather description react
if (weather.weather[0].description === "clear sky") {
let bgImg = {
backgrounImage: "url(../public/clear-sky.jpg)"
}
}
})
.catch(err => console.log(err))
}
}, [lat, lon])
console.log(weather);
const changeTemperature = () => setIsCeslsius(!isCeslsius)
maybe i could just use one component but i know there is a way to pass information from child to parent i just dont know how to

Answer 1

You need to lift the state up. You can do something like this.
App.jsx
const [bgImg, setBgImg] = useState('');
<div className="App" style={{backgroundImage: bgImg}}>
Pass setBgImage to child
<WeatherApp setBgImg={setBgImg} lon={coords?.lon} lat={coords?.lat}/>
In WeatherApp.jsx
let bgImg = "url(../public/clear-sky.jpg)";
props.setBgImg(bgImg);
This should set the background image of parent.

Answer 2

You can use useState hook and initialize it with the default value in parent component. Then pass the setter function to the WeatherApp component as p props.
In parent component
const [bgImgUrl, setBgImgUrl] = useState('your default URL here');
Pass the props to the WeatherApp component
<WeatherApp lon={coords?.lon} lat={coords?.lat} setBgImgUrl={setBgImgUrl} />
Then in the weather App component, you use to write your function
....
setTemperature(temp)
if (weather.weather[0].description === "clear sky") {
let bgImg = {
backgrounImage: "url(../public/clear-sky.jpg)"
}
// update the state
props.setBgImgUrl(bgImg)
}
....