How to send consumed API response to another component?

Question

I am using Weatherbit API to make a web-aap. I am consuming API response in App.js file then saving it to a state, and then passing that state to another component. But that component is getting initial value(empty object) of that state not the API response. LOOK at the code below.

function App() {

  const [details, setDetails] = useState({ "value": "First" })
  const [url, setUrl] = useState("")

  const fetchWeather = async () => {
    const { data } = await Axios.get(`https://api.weatherbit.io/v2.0/current?city=Modasa&key=24d74085081e4ec7b4971bec0a1f2ef3`)

    // const details = data.data[0]
    console.log(data)
    setDetails(data)
  }

  useEffect(() => {
    fetchWeather()
  }, [])

  return (
    <div className="App">
      <SectionOne data={details} />
    </div>
  );

}

export default App;

** And the second component where i am getting initial value (empty object)**

const SectionOne = ({ data }) => {

  return (
    <div>

      <div className="sectionOne">
        <span className="region">{`${data.data[0].city_name}`}</span>
        <span className="country">{data.data[0].country_code}</span>
      </div>

      <div className="sectionTwo">
        <span className="icon"><img source={data.data[0].weather?.icon} /></span>
        <span className="temp">{data.data[0].temp}</span>
        <span className="unit">°C</span>
        <span className="feels">Feels Like {data.data[0].app_temp} °C | {data.data[0].weather?.description}</span>
      </div>

      <div className="sectionThree">
        <div><span>Wind</span>{data.data[0].wind_spd} KM</div>
        <div><span>Wind Dir.</span>{data.data[0].wind_cdir}</div>
        <div><span>Humidity</span>{data.data[0].current?.humidity} %</div>
        <div><span>Pressure</span>{data.data[0].pres} MB</div>
        <div><span>UV Index</span>{data.data[0].uv}</div>
        <div><span>Visibility</span>{data.data[0].vis} KM</div>
      </div>

    </div>
  )
}

export default SectionOne

Answer 1

you set initial state as { "value": "First" } but SectionOne component expect data in other format, try to access property data.data[0].city_name which does not exists. hence you get error.

You should set initial state null

const [details, setDetails] = useState(null)

and have null check in render. This is best practice.

return (
    <div className="App">
      { details && <SectionOne data={details} /> }
    </div>
  );