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
- if not have data
- 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;
Source: stackoverflow.com
Related Query
- how do i passing nesting object as a props in react
- React - passing object through props
- How to set React default props for object type
- Does passing an object via props to child react component, clone the original object or pass by reference?
- How do I pass an object containing props to React component?
- How to set object type props value in an enzyme for a react component?
- React Higher Order Elements - how far can one go with passing props
- React how to check props before passing in another component
- How to passing props in React + TypeScript from parents to children component?
- How to pass object with known fields as props in react
- React selectively not passing new props to rendered object
- How to type an object that contains a React component as a property and also that component's props as another property?
- React - How to Populate one Dropdowns based on selection from another Dropdown by Passing State as props
- How to pass an object as props in a map function in react
- How to access nested props object in React TS?
- Passing a JS object as a React props
- How to map props to object value React Big Calendar
- How do I access nested object properties within React props
- React JS - passing info from object and array as props to child component
- Props object what is the meaning of passing children to the component from React official documentation
- objects are not valid as a react child (found object with keys) while passing props from one component to other
- passing props within react router with history object
- How to render props conditionally and checking for undefined, while passing props via React useHistory?
- How to sort sum up all values from object arrays inside react props
- Passing react props as object
- how to avoid re-rendering when passing the object into value of context.provider using React context
- How does react components use data without passing as props
- How do I pass an object (created by a buttonClick event) from child to parent in react when already using props for a styled button
- Passing number as props in React becomes Object object
- How to prevent passing className and style props to component in React
More Query from same tag
- ReactJS display data from Wordpress API
- How to write an alternate function of util.promisify in Node js?
- If I was mapping thru a collection, and placing buttons for each doc, how could I grab the docID from the button to its function?
- Why am I getting a 'no-unused-var' error when using in an inline function
- Cannot set nested object as default values in the react-hook-form
- convert length to point in svg (polygon) dynamically
- Where should I keep data models in React and Redux?
- Problem passing child to parent with SRC of image. REACT JS
- React router history push always route to 404 page
- Add text over images next to each other with react inline styles
- How to only compile one typescript file with webpack 5 and exclude everything else?
- React HoC PropTypes/PascalCase
- Disable "Select By Typing" in Material UI Menu Component
- Is there a react date picker that allows two week view?
- Uncaught TypeError: Cannot read property 'setState' of undefined
- Upload app, which checks for specific fields/values - How to dynamically add/remove requirements and change required format of file in code?
- React error: warn There are multiple modules with names that only differ in casing
- Not able to set ShadowColor in react-native android
- Render different layouts in react depending on screen's size ( responsive )
- Warning: Unreachable code , using Reactjs
- Using React State Hook, call function after setting multiple states
- Local state, and global state: One container using another container's reducers, sagas, actions, etc
- How redirect user if error.status == 401?
- how to use many sounds using useSound - React Js
- Add event listener on scroll of dropdown select options and fetch data using react-async-select
- More values in Ternary operator?
- Return exists but it still says, "Nothing was returned from render."
- How to declare type of an array of a dynamic object as react state?
- Unsorted table data is rendered along with sorted data in table
- JSX with a HTML tag from a variable