score:3
@matej, if you are looking for updates i hope this will work for you. https://codesandbox.io/s/youthful-shockley-o1dzo?file=/src/app.js
const constantweather = props => {
return (
<div classname="card" key={props.cityid}>
<div>
{props.cityname}, {props.country}
</div>
<div>{props.temperature}</div>
<img alt="" />
</div>
);
};
const constantweatherlist = props =>
(props.weatherconst || [])
.filter(el => el) // filter null if you getting from api
.map(el => {
return (
<constantweather
key={el.id}
cityid={el.id}
cityname={el.name}
country={el.sys.country}
temperature={el.main.temp}
/>
);
});
<constantweatherlist weatherconst={data} />
// styles
.card {
display: inline-block;
border: 1px solid;
padding: 10px;
margin: 10px;
}
score:1
you should add a null check in order not to take
undefined
error from api responses for nested objects. you need to check whetherel.sys
is defined or not.try to use normal classes in css. just import the css file and use strings as a classname.
you must set the key to the element that comes after from map function. for this case, it should be
<constantweather key={city.id} />
score:2
to solve the 1st issue you will need to wait for the api to successfully retrieve data and then only you should map on the data. so what you could do is you set initial state for weatherconst as an empty array like below
const [weatherconst, setweatherconst] = usestate([]);
and then while mapping on the data you could check the length of the fetched data. while check you should do boolean operation not just length
check.
let constantweatherlist = weatherconst.length > 0 && weatherconst.map(el => {
return <constantweather
key={el.id}
cityid={el.id}
cityname={el.name}
country={el.sys.country}
temperature={el.main.temp}
/>
})
remember, this is just an example and there are multiple ways to do the same thing.
for css issue you will need to assign a proper class to the div as classname="card"
for the 3rd issue you need to assign key to constantweather component as shown in the code above.
Source: stackoverflow.com
Related Query
- React - second layer of object in list is undefined
- react this.props undefined or empty object
- Ref object is possibly undefined TypeScript React
- Getting undefined is not an object in React native when rendering
- undefined is not an object (evaluating '_this2.props.navigation.navigate') - React Native
- TypeError : React object is undefined on createElement
- Filtering object list with React
- undefined is not an object (evaluating 'RCTWebSockerManager.connect') -- React Native
- React Native render error Value is undefined expected a object
- How prevent duplicated list object in react redux
- React / Typescript : pushing obj into array of object and undefined type
- Cannot convert undefined or null to object in react
- React remove object from list of objects without unique value, using hooks
- Event listener onMouseMove in react hooks: event object is undefined or clientX/Y are null
- TypeError: undefined is not an object in React
- TypeError: Cannot convert undefined or null to object React Validation
- TS2531 | React useRef - Object is possibly undefined
- How to make a list from json object using React
- React typescript - object is possibly undefined
- React imported library throws error: cannot convert undefined or null to object
- React can not convert undefined or null to object
- Having Object value but react says undefined react redux
- React asynchronous call throws Cannot convert undefined or null to object at Function.getOwnPropertyNames
- React Leaflet first object is undefined in a useState case for drawing map markers
- React API object in JavaScript keeps saying undefined
- A state is undefined object when using React and Redux , Router
- React setState of an object returns undefined
- React Get second object if id is equals with another object id
- Second layer of conditional statement within inline condition react
- React Render Called Twice, Props Undefined on Second
More Query from same tag
- Passing child's events to a parent
- React setState() not updating state after $.ajax() request
- React - Why Props do not update
- How can I make an axios call before rendering and store a session?
- transition css property making content to see twice
- React Typescript: Checkbox disabled using variable
- When I import a type from an NPM package in Typescript, which file is it coming from?
- The form in one Component gets submitted by other Components
- How to clearInterval on componentWillUnmount() correctly in react?
- Pass function to divIcon in React-Leaflet
- Get updated state of the component outside the render
- "error above occured in the p component". Array mapping in REACT
- React Project Directory created in an Express.js Directory
- How to make options (public or private) on Post? reactjs, nodejs
- Rendering table's data header in reactjs
- How to set defaultValue, value={this.props.value}, and update the value of a text input with React?
- how can i change the status of the username in reactjs using axios?
- Creating a timer in react
- How to curry a dispatch function with react/redux?
- Passing value of input tag to a search button tag - ReactJS
- How to assign return of async value to initial state of reducer?
- How to disable a checkbox conditionaly?
- React remove item from nested list
- ReactJS and Less, set dynamic class
- JSX expressions must have one parent element nextjs
- How to convert a React Fragment to an Array?
- First fetching data is successfull, second fetching not
- Redirect to Homepage or any page
- Cannot access property passed via user provider
- Unable to populate option elements to select element using array.map()