score:0

if the error is cannot read property 'speed' of undefined that means wind is undefined. if you console.log(this.props.data) you should be able to see all the available properties in chrome devtools.

it shouldn't matter how deeply nested your objects are in your child component. one way to make accessing the data easier, though, is spreading your state into the child components: <currentweather {...this.state.cityweather} />

then you can access data with this.props.name.

there may be other issues with the way you're accessing props, but it'll be hard to tell as the response you posted is incomplete.

score:1

the error is because if your api is taking some time to respond(which is normal) then component will render without values first and after getting values it will render again (if this.setstate() or this.forceupdate() is called).

so at the first render child will render without values so it will through error like this to overcome this problem we can give different return values

  1. if not have data
  2. after getting data

change to this in the render method of currentweather

render(){
 if(!this.props.data.name){
  return(
    <div>
       loading....
    </div>
 )
 }else {
  return (
  .....//your current return code for currentweather  class (component)
  .....
  )

 }
}

score:1

ok i found the solution, my state:

state = {
             cityweather:null  ,

    }

rather then doing this.setstate(()=>({ cityweather:weatherdata})); directly, i created a new data object and extracted all the values and set it to thisobject

const data={
            cloudiness:weatherdata.weather[0].description,
               lat:weatherdata.coord.lat,
               lon:weatherdata.coord.lon,
               icon:weatherdata.weather[0].icon,
               sunrise:new date(weatherdata.sys.sunrise * 1000).tolocaletimestring(),
               sunset:new date(weatherdata.sys.sunset * 1000).tolocaletimestring(),
               humidity:weatherdata.main.humidity,
               currenttemp:weatherdata.main.temp,
               pressure:weatherdata.main.pressure,
               wind:weatherdata.wind.speed,
               cityname:`${weatherdata.name},${weatherdata.sys.country}`,
               date:moment().format("dd mmm yyyy") 
            }
            this.setstate(()=>({cityweather:data}));

and i the props are passes like this

let  currentweather;
        if (this.state.cityweather != null) {
            currentweather=<currentweather  {...this.state.cityweather} />
        } 

and in child component the value are extracted like this:

const { lat,lon ,wind, currenttemp, cityname,
       cloudiness,pressure,humidity,sunrise,sunset,icon,date}=this.props;

Related Query

More Query from same tag