I am fetching data from api and importing the data in the WeatherData.js and passing it as a prop to SmallWeatherCard.js because I want to pass it to another component too later on.
when I do console.log(data) in SmallWeatherCard.js I can see the whole data in the console but when trying to map it I get an error "Cannot read property of undefined"
What am I doing wrong here?
all the code here: Codesanbox
import React from "react";
export const SmallWeatherCard = ({ data }) => {
return (
<div>
{data.properties.timeseries.map((i, index) => (
<div>
<ul key={index}>
<li> {i.data.next_6_hours.summary.symbol_code}
</li>
<li>
{Math.round(i.data.next_6_hours.details.air_temperature_min)}°
</li>
<li>|</li>
<li>
{Math.round(i.data.next_6_hours.details.air_temperature_max)}°
</li>
</ul>
</div>
))}
</div>
);
};
Your probably using this kinda api. So, the error is api doesn't always return all fields. For example in my case i.data.next_6_hours wasn't defined.
So, try something like this,
export const SmallWeatherCard = ({ data }) => {
console.log(typeof data);
return (
<div>
{data.properties.timeseries.map(
(i, index) =>
i.data.next_6_hours != null && (
<div>
<ul key={index}>
<li>
{Math.round(i.data.next_6_hours.details.air_temperature_min)}°
</li>
<li>|</li>
<li>
{Math.round(i.data.next_6_hours.details.air_temperature_max)}°
</li>
</ul>
</div>
)
)}
</div>
);
};
Using CodeSandbox.
Related
I"m trying to render comments with likes and loop them. please see image on demo.
All of this comes form data.json
How can I loop all comments? I have only one displayed. What am I missing here?
Sorry I'm trying my best here with react as I'm quite a beginner.
my index.js
import React from "react";
import styles from "./styles";
const Posts = (props) => {
const { data } = props;
const comments = data.edge_media_to_comment.edges[0].node.text
const locationName = data.location.name
const username = data.owner.username
const id = data.id
const url = `https://www.instagram.com/${data.owner.username}`
const likes = data.edge_media_preview_like.count
return (
<>
<a href={url} rel="noopener noreferrer" target="_blank" key={id}>
<img src={data.owner.profile_pic_url} />
</a>
<span>{locationName}</span>
<a href={url} rel="noopener noreferrer" target="_blank" key={id}>#{username}</a>
<p>{username}</p>
<hr />
<ul>
<li>
{comments !== null ? comments.toLocaleString() : 0}
</li>
<li className="post-item-likes">
{likes !== null ? likes.toLocaleString() : 0}
</li>
</ul>
<hr />
</>
);
};
export default Posts;
In your Post component need to use data.comments from props and use .map
method for render multiple comments instead of comments.toLocaleString()
Example:
import React from "react";
const Posts = (props) => {
const { data } = props;
console.log('007',data);
return (
<>
<img src={data.owner.profile_pic_url} />
<span>{data.location.name}</span>
<a href="" target="_blank">
#{data.owner.username}
</a>
<p> {data.owner.username}</p>
<hr />
<div>
{data?.comments?.map(comment => {
return (<div>
{comment?.text} - {comment?.likeCount}
</div>)
})}
</div>
</>
);
};
export default Posts;
You need to map through the comments array and for each comment return the text and likes.
Declare comments - below const { data } = props;:
const comments = data.comments;
In return add this:
<ul>
{comments.map((comment) => (
<li>
{comment.text} - {comment.likeCount}
</li>
))}
</ul>
I am trying to program an app using reactjs and am running into the error above.
I believe this means that my tasks array is undefined, but I think that is is defined so I'm not sure what the problem is or how to fix it. I think the error is around the array involving the .map. Thank you!
import React from 'react';
import Task from './Task.js';
export default ({ tasks }) => {
return (
<ul className="list-group">
{tasks.map(task => (
<li key={task.id} className="list-group-item">
<Task task={task} />
</li>
))}
</ul>
);
}
Your provided code is totally fine.
but if you are getting the list from api and setting it in state then your problem is that at first render the tasks array will be undefined and you need to deal with it, maybe adding loading indicator or adding default value as empty array for tasks prop.
import React from "react";
const TaskList = ({ tasks = [] }) => {
return (
<ul className="list-group">
{tasks.map((task) => (
<li key={task.id} className="list-group-item">
{task.description}
</li>
))}
</ul>
);
};
function App() {
const tasks = [
{ id: 0, description: "do this", done: false },
{ id: 1, description: "do that", done: false }
];
return (
<div>
<TaskList tasks={tasks} />
</div>
);
}
export default App;
I am new in React , I was following the course of React. And the code as follow appeared issue like "TypeError: Cannot read property 'map' of undefined"; Can anyone tell what's going on ? Thank you so much!
import React, { Component } from 'react'
const ListGroup = props => {
const {items,textProperty,valueProperty} = props;
return (
<ul className="list-group">
{items.map(item =>(
<li key={item[valueProperty]} className="list-group-item">
{item[textProperty]}
</li>
))}
</ul>
);
}
export default ListGroup;
You didn't seem to pass items prop to ListGroup:
<ListGroup items=[] />
Alternatively, you can assign a default value to items:
const {items = [],textProperty,valueProperty} = props;
Or use elvis operator:
items?.map(item => {})
Your items object is undefined at the start. Just add a null check:
const ListGroup = props => {
const {items,textProperty,valueProperty} = props;
return (
<ul className="list-group">
{items && items.map(item =>(
<li key={item[valueProperty]} className="list-group-item">
{item[textProperty]}
</li>
))}
</ul>
);
}
You can use operate chaining, change your code to:
const ListGroup = props => {
const {items,textProperty,valueProperty} = props;
return (
<ul className="list-group">
{ items?.map(item =>(
<li key={item[valueProperty]} className="list-group-item">
{item[textProperty]}
</li>
))}
</ul>
);
}
```
I'm taking the same course. Make sure that you have passed the right props to ListGroup in Movies class just like that:
<ListGroup
items={this.state.genres}
textProperty="name"
valueProperty="_id"
onItemSelect={this.handleGenreSelect}
/>
Regards!
Relatively new to React and trying to sort the mapped prop nearbyRestaurants alphabetically by place.name. Is there a way I can chain the sort method to the end of the map method to alphabetize the list?
export default function RestaurantList({nearbyRestaurants}) {
return (
<div>
<ul>
<li className="list-header">Restaurants</li>
{nearbyRestaurants.map((place) => (
<div>
<li>
<div>{place.name}</div>
<div>{place.vicinity}</div>
</li>
</div>
))}
</ul>
</div>
);
}
Sort the array before mapping it.
function sortAlphabetically(a,b){
return a.name.localeCompare(b.name)
}
export default function RestaurantList({nearbyRestaurants}) {
return (
<div>
<ul>
<li className="list-header">Restaurants</li>
{nearbyRestaurants.sort(sortAlphabetically).map((place) => (
<div>
<li>
<div>{place.name}</div>
<div>{place.vicinity}</div>
</li>
</div>
))}
</ul>
</div>
);
}
I have the following in React (using redux):
....
deleteBase(title) {
this.props.dispatch(removeBase(title));
}
render() {
const baseList = this.props.bases.map(base => {
return (
<li key={base.title} className="base">
<Link to={base.title}>{base.title}</Link>
<i
className="fas fa-times"
onClick={title => this.deleteBase(title)}
/>
</li>
);
});
}
In the dispatch function of removeBase I will need to have access to the single base.title from the clicked element. No matter how I try to get the right title transferred over to the function I can't do it.
return (
<ul className="baseWrapper">
{baseList}
<li className="add-list-wrapper">
<AddBase type="base" onAdd={title => this.addBase(title)} />
</li>
</ul>
);