The tag fires faster than the condition in the react component, how to fix it?

Question

React

React component:

export default function Downloading(props) {
  return (
    <>
      {
        props.isDownload
        ? <>{props.children}</>
        : <div>Загрузка...</div>
      }
    </>
  )
}

As I understand it, with static props.children it works fine, but with the following line of the problem:

<Downloading isDownload={isDownload}>
  <img src={`http://openweathermap.org/img/wn/${data.current.weather[0].icon}@4x.png`} alt="Weather" />
</Downloading>

The data.current.weather[0].icon object is loaded asynchronously and at the start of rendering - this object does not exist - the "Cannot read properties" error immediately flies. As I understand it, the string in the tilde is first processed, and only then the condition check in the Downloading component begins.

Is it possible to somehow make it so that the condition in the Downloading component is first processed, and only then proceeds to processing the img tag?

Answer 1

Something like that

export default function Downloading(props) {
  return (
    <>
      {
        props.isDownload
        ? <>{props.children()}</>
        : <div>Загрузка...</div>
      }
    </>
  )
}



<Downloading isDownload={isDownload}>
  {() => <img src={`http://openweathermap.org/img/wn/${data.current.weather[0].icon}@4x.png`} alt="Weather" />}
</Downloading>

https://reactjs.org/docs/render-props.html#using-p...
should work