How can i access object properties taken from an API, and pass them into my components in React?

Question

im a beginner in React js, and this is my weather app, which takes data from an API.How can i use props to pass in the data that i want to pass into my components? I tried accessing property and storing it into a variable first, and then pass it, but it says it is undefined and shows error, and i think this happens because it cant assign it a value before i fetch the data from the API.For example, i want to access and pass the degrees value from the weather object to my DegreesContainer component.

const AppContainer = () => {
  const [query,setQuery]=useState('');
  const [weather,setWeather]=useState({});
  const search = (event) => {
    if(event.key==='Enter'){
      axios.get(`${api.base}weather?q=${query}&units=metric&APPID=${api.key}`)
      .then(result=>{
        setWeather(result.data);
        setQuery('');
        console.log(result);
      })
    }
  };
  return (
    <div className='app-container'>
      <Searchbar query={query} setQuery={setQuery} search={search}/>
      <DegreesContainer/> 
     
    </div>
  )
}
export default AppContainer;

Answer 1

Passing a prop would be the same as any other component. For example, to pass the weather object:

<DegreesContainer weather={weather} />

Or to pass a single value from that object:

<DegreesContainer weather={weather.someValue} />

Be aware of course that someValue is initially undefined , since the object is initially {} . So the component receiving this prop would need to be able to handle that and not assume there's a value.

Alternatively, you could pass a default when it's undefined , for example:

<DegreesContainer weather={weather.someValue ?? ''} />

Or let's say you want to traverse multiple properties, for example:

<DegreesContainer weather={weather.someObj.someValue} />

This would fail on the initial render because someObj is undefined . You can conditionally check for that:

<DegreesContainer weather={weather.someObj ? weather.someObj.someValue : ''} />

The null checking essentially keeps going from there. Basically anywhere something might be null or undefined you would need to check that before using it.

There's also the option of not even rendering the component unless data is available. For example:

<>
  {
    weather.someObj ?
    <DegreesContainer weather={weather.someObj.someValue} /> :
    null
  }
</>

What's happening here is that the component itself is wrapped in a conditional check to see if weather.someObj exists. If it doesn't, the component itself is replaced with null in the rendering and just doesn't render at all.

(Keep in mind that a side-effect of this could be that logic within the component which only happens "on the first render", like a useEffect with an empty dependency array, can be re-invoked because dynamically adding/removing the component like this fully un-loads and re-loads it.)