I try to do a map of my differents people but it gives me the error on the title
I don't really understand and there is my code:
export const Testt = ({ childs}) => {
console.log(childs)
return childs.map((element, index) => (
//element
<div>
zdijiziojzadioj
</div>
)
)
}
and there is my childs
(12) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {_id: '619e7301e74b007f5c62482d', firstName: '', lastName: '', birth: '2020-11-19', genre: 'male', …}
1: {_id: '619fae3c96f85d2415d8fe24', firstName: '', lastName: '', birth: '2021-11-03', genre: 'male', …}
2: {_id: '619fae5296f85d2415d8fe28', firstName: '', lastName: '', birth: '2021-11-04', genre: 'male', …}
3: {_id: '619faec296f85d2415d8fe39', firstName: '', lastName: '', birth: '2021-11-04', genre: 'male', …}
4: {_id: '619faee196f85d2415d8fe40', firstName: '', lastName: '', birth: '2021-11-04', genre: 'male', …}
5: {_id: '619faf1496f85d2415d8fe4e', firstName: '', lastName: '', birth: '2021-11-04', genre: 'male', …}
...
length: 12
I don't understand where can be the problem, i already used the map but i have never had this problem,
Thanks for yours answer!
Probably means that the value childs is not populated at the initial render.
What we usually do in React to circumvent this, is adding conditional statements.
This should do the trick -
export const Testt = ({ childs}) => {
console.log(childs)
return childs && childs.map((element, index) => (
//element
<div>
zdijiziojzadioj
</div>
))
}
Related
I am trying to map through OpenBrewery's API but when I try to pull data from it it continues to come up undefined. My code:
import axios from "axios";
import "../styles/List.css";
import { useState, useEffect } from "react";
import BrewCard from "../components/BrewCard";
// data-types: brewery_type, city, country, id, name, phone, latitude, longitude, postal_code, state, street, website_url
const List = () => {
const [brew, setBrew] = useState([]);
useEffect(() => {
const getBrew = async () => {
let newBrew = await axios.get(
"https://api.openbrewerydb.org/breweries?by_city=atlanta"
);
setBrew(newBrew.data);
};
getBrew();
}, []);
console.log(brew);
return brew.length > 1 ? (
<div className={`main-bg-color list-container`}>
{brew.map((beer) => {
<p>{beer.name}</p>;
})}
</div>
) : (
<div>Loading</div>
);
};
export default List;
The console.log shows that 'brew' has the data but when I try to map (such as my beer.name p tag), it shows 'undefined'. I'm not sure what I'm missing. Just for clarification this is what I receive when I console.log the data:
(20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0
:
{id: '5-seasons-brewing-co-westside-atlanta', name: '5 Seasons Brewing Co - Westside', brewery_type: 'brewpub', street: '1000 Marietta St NW Ste 204', address_2: null, …}
1
:
{id: 'eurobevs-atlanta', name: 'EuroBevs', brewery_type: 'contract', street: '2255 Cumberland Pkwy SE', address_2: null, …}
2
:
{id: 'eventide-brewing-co-atlanta', name: 'Eventide Brewing Co', brewery_type: 'micro', street: '1015 Grant St SE', address_2: null, …}
3
:
{id: 'fire-maker-brewing-company-atlanta', name: 'Fire Maker Brewing Company', brewery_type: 'micro', street: '975 Chattahoochee Ave NW', address_2: null, …}
4
:
{id: 'gordon-biersch-brewery-restaurant-atlanta-atlanta', name: 'Gordon Biersch Brewery Restaurant - Atlanta', brewery_type: 'brewpub', street: '3242 Peachtree Rd NE', address_2: null, …}
5
:
{id: 'max-lagers-wood-fired-grill-and-brewery-atlanta', name: "Max Lager's Wood Fired Grill & Brewery", brewery_type: 'brewpub', street: '320 Peachtree St NE', address_2: null, …}
6
:
{id: 'monday-night-brewing-atlanta', name: 'Monday Night Brewing', brewery_type: 'micro', street: '670 Trabert Ave NW', address_2: null, …}
7
:
{id: 'monday-night-brewing-garage-atlanta', name: 'Monday Night Brewing - Garage', brewery_type: 'micro', street: '933 Lee St SW', address_2: null, …}
8
:
{id: 'new-realm-brewing-atlanta', name: 'New Realm Brewing', brewery_type: 'brewpub', street: '550 Somerset Ter NE Unit 101', address_2: null, …}
9
:
{id: 'odempseys-brewing-co-atlanta', name: "O'Dempsey's Brewing Co", brewery_type: 'contract', street: '205 Grosvenor Place, Nw', address_2: null, …}
10
:
{id: 'orpheus-brewing-atlanta', name: 'Orpheus Brewing', brewery_type: 'micro', street: '1440 Dutch Valley Pl NE Ste 2001', address_2: null, …}
11
:
{id: 'park-tavern-brewery-atlanta', name: 'Park Tavern Brewery', brewery_type: 'brewpub', street: '500 10th St NE', address_2: null, …}
12
:
{id: 'perfect-fool-brewing-company-atlanta', name: 'Perfect Fool Brewing Company', brewery_type: 'planning', street: null, address_2: null, …}
13
:
{id: 'red-brick-brewing-co-atlanta-brewing-co-atlanta', name: 'Red Brick Brewing Co / Atlanta Brewing Co', brewery_type: 'micro', street: '2323 Defoor Hills Rd NW', address_2: null, …}
14
:
{id: 'sabbath-brewing-atlanta', name: 'Sabbath Brewing', brewery_type: 'planning', street: null, address_2: null, …}
15
:
{id: 'scofflaw-brewing-co-atlanta', name: 'Scofflaw Brewing Co', brewery_type: 'micro', street: '1738 Macarthur Blvd NW', address_2: null, …}
16
:
{id: 'second-self-brewing-atlanta', name: 'Second Self Brewing', brewery_type: 'micro', street: '1311 Logan Cir NW', address_2: null, …}
17
:
{id: 'stats-brewpub-atlanta', name: 'Stats Brewpub', brewery_type: 'brewpub', street: '300 Marietta St NW', address_2: null, …}
18
:
{id: 'sweetwater-brewing-co-atlanta', name: 'SweetWater Brewing Co', brewery_type: 'regional', street: '195 Ottley Dr NE', address_2: null, …}
19
:
{id: 'the-lost-druid-atlanta', name: 'The Lost Druid', brewery_type: 'planning', street: null, address_2: null, …}
length
:
20
[[Prototype]]
:
Array(0)
I tried mapping through the API as normal but it seems I'm somehow not reaching into the json structure properly. I need to be able to map elements of this API to create a React page that lists all results.
You are missing a return in the map
function for the p element.
Change your code from
{brew.map((beer) => {
<p>{beer.name}</p>;
})}
to
{brew.map((beer) => {
return <p>{beer.name}</p>;
})}
or do it inline like this
{brew.map((beer) => <p>{beer.name}</p>)}
Context:
I have a component whichj emits data to the parent. Parent has two default objects-An empty array, and another object which contains default values, which are used to add a new element to the array using the data passed.
Template:
<billing-search
:search-term="searchText"
:show-modal="showBillingModal"
#closeModal="CloseBillingModal"
#selectedAnItem="AddSelectedItem"
/>
Initial data:
data() {
return {
billitems: [],
billitem_def: {
invitem: null,
procitem: null,
stockid: null,
qty: 0,
unitprice: 0,
discpercent: 0,
disc: 0,
}
}
},
My method in the parent triggered on emiting from the component, is this:
AddSelectedItem(data) {
console.log(`In AddSelectedItem`);
console.log(`this.billitems was `, this.billitems);
console.log(`Got data passed by component:`, data);
let newitem = this.billitem_def
console.log(`this.billitems was `, this.billitems);
newitem.invitem = data.item
newitem.stockid = data.storeitem
newitem.unitprice = newitem.stockid.mrp
console.log(`Added new item to billing list:`);
console.log(newitem);
this.billitems.push(newitem)
console.log(`this.billitems is now `, this.billitems);
console.log(`this.billitem_def is `, this.billitem_def);
},
See an example of console log:
In AddSelectedItem
BillingBlock.vue?670b:173 this.billitems was
0:
disc: 0
discpercent: 0
invitem: {id: 50, name: 'Waxonil Activ Ear Drops', description: 'Adult ear drops', itemtype: 4, clinic: 10, …}
procitem: null
qty: 0
stockid: {id: 432, entry: {…}, item: {…}, quantity: 30, stock: 21, …}
unitprice: "119.30"
BillingBlock.vue?670b:174 Got data passed by component:
{
item: {
clinic: 10
description: "Adult ear drops"
drugid: null
id: 50
isOpen: true
itemtype: 4
name: "Waxonil Activ Ear Drops"
storeitem: (13) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
},
storeitem: {
batchnum: "SW135"
entry: {id: 275, entry_number: 'WjazQPLxb', reference_number: '', invoice_number: 'A-50864', entry_date: '2021-12-20', …}
expirydate: "2024-08-21"
id: 432
item: {id: 50, name: 'Waxonil Activ Ear Drops', description: 'Adult ear drops', itemtype: 4, clinic: 10, …}
manufacturedate: null
}
}
BillingBlock.vue?670b:177 this.billitems was
Proxy {
0:
disc: 0
discpercent: 0
invitem: {id: 50, name: 'Waxonil Activ Ear Drops', description: 'Adult ear drops', itemtype: 4, clinic: 10, …}
procitem: null
qty: 0
stockid: {id: 432, entry: {…}, item: {…}, quantity: 30, stock: 21, …}
unitprice: "119.30"
}
BillingBlock.vue?670b:181 Added new item to billing list:
BillingBlock.vue?670b:182
Proxy {invitem: {…}, procitem: null, stockid: {…}, qty: 0, unitprice: '119.30', …}
BillingBlock.vue?670b:185 this.billitems is now
Proxy {0: {…}}
BillingBlock.vue?670b:186 this.billitem_def is
Proxy { invitem: {… }, procitem: null, stockid: {… }, qty: 0, unitprice: '119.30', … }
Problems with this:
The this.billitems was shows data even before it is being assigned, instead of an empty array
this.billitem_def was set to some null values initially in the data part. It was not meant to get values, but to serve as a template of default data. Though I had let newitem = this.billitem_def, how is this.billitem_def's data getting modified? I dont have code anywhere in the project assigning this.billitem_def to anything else.
I am using a third party API which provides a nested JSON object in return. I'm converting this data into CSV. I have used http get request to get data. The data looks good in console but does not bind with HTML. When I download the CSV file, I only see objects. I should be able to see the value of those objects in the downloaded file instead. The CSV file is automatically downloaded when I navigate to that menu. I want it to download only on "Export CSV" button click. Can someone help me with it? Thanks.
Array(10)
0: {_id: "611368f375aeaa23cce260fa", customer: {…}, transaction: {…}, serviceProvider: {…}, couponSurvey: {…}, …}
1: {_id: "6113685775aeaa23cce260f4", customer: {…}, transaction: {…}, serviceProvider: {…}, couponSurvey: {…}, …}
2: {_id: "611269c43d37b7199c620db7", customer: {…}, transaction: {…}, serviceProvider: {…}, couponSurvey: {…}, …}
3: {_id: "611269843d37b7199c620db2", customer: {…}, transaction: {…}, serviceProvider: {…}, couponSurvey: {…}, …}
4: {_id: "611268f63d37b7199c620dad", customer: {…}, transaction: {…}, serviceProvider: {…}, couponSurvey: {…}, …}
5: {_id: "611268c73d37b7199c620da8", customer: {…}, transaction: {…}, serviceProvider: {…}, couponSurvey: {…}, …}
6: {_id: "61125dc428ed930c0e05c3b1", customer: {…}, transaction: {…}, serviceProvider: {…}, couponSurvey: {…}, …}
7: {_id: "6112565c28ed930c0e05c3ac", customer: {…}, transaction: {…}, serviceProvider: {…}, couponSurvey: {…}, …}
8: {_id: "611254b75dcb9a5af3b3b1a5", customer: {…}, transaction: {…}, serviceProvider: {…}, couponSurvey: {…}, …}
9: {_id: "611254605dcb9a5af3b3b1a2", customer: {…}, transaction: {…}, serviceProvider: {…}, couponSurvey: {…}, …}
Data looks like this in the console.
.ts file
loading = false;
showTransactionValue = false;
var: any;
bucket: any[] = [];
this.api.fetchTableData('transfer/get-transactions', params, true).then((data) => {
this.transID = '';
this.loading = false;
this.var = data.docs;
this.page.rows = data.docs;
this.page.count = data.total;
this.results(data);
console.log(data.docs);
Object.entries(this.var.matches).map( res => {
this.bucket.push(this.var[1])
});
},
.html file
<div class="form-group">
<button class="btn btn-primary waves-effect btn-sm text-white" (click)="results()">Export CSV</button>
</div>
<div *ngFor="let item of bucket;">{{item?._id}}</div>
I'm working on a project in react, which I console.log a data and it shows, but when i try to display, its not working. I think im missing something. Its not displaying the length, id or body of the content
<Badge count={`${notify !== null ? notify.length : 0}`} overflowCount={10}>
<Dropdown
overlay={<Menu>
{notify && notify.map(notify => {
return (
<Menu.Item key={notify.id}>
{notify.body}
</Menu.Item>
);
})}
{notify && notify.length < 1 ? (
<Menu.Item>No notifications yet</Menu.Item>
) : null }
<Menu.Divider />
<Menu.Item onClick={() =>
this.props.history.push("/notifications")
}>
VIEW ALL <ArrowRightOutlined /></Menu.Item>
</Menu>
}
trigger={['click']}>
<a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
<BellOutlined style={{ fontSize: '25px', color: '#2aa515' }}/>
</a>
</Dropdown>
</Badge>
This is the data from the console.log
(21) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0:
assigned_to: 4
body: "tayodami followed you! ID: 12"
creation_date: "2020-10-10T19:41:23.428773Z"
group: "NF"
id: 21
is_read: true
pk_relation: 12
__proto__: Object
1: {id: 22, group: "NF", creation_date: "2020-10-10T19:43:27.537867Z", is_read: true, body: "que followed you! ID: 13", …}
2: {id: 23, group: "NF", creation_date: "2020-10-10T20:05:06.098263Z", is_read: true, body: "oladeji followed you! ID: 14", …}
3: {id: 24, group: "NF", creation_date: "2020-10-11T05:41:46.792794Z", is_read: true, body: "oladeji followed you!", …}
4: {id: 25, group: "NC", creation_date: "2020-10-11T10:39:02.069264Z", is_read: true, body: "que commented: asfasf.", …}
5: {id: 26, group: "NC", creation_date: "2020-10-11T10:40:26.915029Z", is_read: true, body: "que commented: asfasf.", …}
6: {id: 28, group: "NC", creation_date: "2020-10-11T11:36:50.180718Z", is_read: true, body: "que commented: hi.", …}
7: {id: 29, group: "NC", creation_date: "2020-10-11T11:45:38.079017Z", is_read: true, body: "que commented: gg on your post.", …}
8: {id: 31, group: "NC", creation_date: "2020-10-12T11:46:50.121499Z", is_read: true, body: "que commented: hi on your post.", …}
9: {id: 32, group: "NC", creation_date: "2020-10-12T11:50:42.081770Z", is_read: true, body: "que commented: "TODAY" on your pop.", …}
...
length: 21
__proto__: Array(0)
Use console.dir() instead of .log() to get all fields.
https://developer.mozilla.org/en-US/docs/Web/API/Console/dir
I have some troubles mapping fetched objects, i know it's a known problem but it's been two days i'm stuck so i come asking for some help.
I'm trying to output data on an ul from an api but i either have errors or nothing gets output, i know that i am targeting my data inside my object the wrong way, it's the first time i'm trying to target an object with this kind of keys
I have an object 'names' looking like that:
[Array(20)]
0: Array(20)
0:
avatar: ""
country: "RU"
games: (3) [{…}, {…}, {…}]
nickname: "d2mash"
player_id: "07982364-a458-4a1f-b6d6-1be146db9126"
status: "AVAILABLE"
verified: true
__proto__: Object
1: {player_id: "cab2a609-de2f-4023-a9c7-af89d5292c96", nickname: "D0cC-", status: "BUSY", games: Array(1), country: "NL", …}
2: {player_id: "d67a944f-1c1d-4d75-a7bf-d52c4b30e7db", nickname: "r1d3Rz", status: "AVAILABLE", games: Array(1), country: "RO", …}
3: {player_id: "f40bef0d-d40a-48d0-8c53-5a513c35bd3a", nickname: "dotademon", status: "AVAILABLE", games: Array(1), country: "US", …}
4: {player_id: "dca784fa-546b-43b7-adf6-cf537d858d4f", nickname: "degeneral", status: "AVAILABLE", games: Array(2), country: "UA", …}
5: {player_id: "e72a43cd-d214-4d4c-989a-efb1d3e7df37", nickname: "daave-", status: "AVAILABLE", games: Array(1), country: "US", …}
6: {player_id: "4e093c2c-f277-4877-a200-029ae6d8602f", nickname: "ddk", status: "AVAILABLE", games: Array(5), country: "US", …}
7: {player_id: "ef629874-bf6e-4066-8612-09e0428e923c", nickname: "dieZzz", status: "AVAILABLE", games: Array(3), country: "RU", …}
8: {player_id: "77995857-d14d-47ed-a150-4f175f70654e", nickname: "durpdurp", status: "AVAILABLE", games: Array(1), country: "US", …}
9: {player_id: "e3ed56b6-138f-4141-b6c9-ba6eab7bfc24", nickname: "dengue", status: "AVAILABLE", games: Array(3), country: "PT", …}
10: {player_id: "d6bd0d6f-a068-4e10-b9a4-129297c8691f", nickname: "disco doplan", status: "BUSY", games: Array(2), country: "SE", …}
11: {player_id: "7e80ed2a-8e39-457e-95c2-1c9ba9449daf", nickname: "dupreeh", status: "BUSY", games: Array(1), country: "DK", …}
12: {player_id: "32772d2f-fb63-4a84-ac06-4c2e20f49082", nickname: "denis-", status: "AVAILABLE", games: Array(1), country: "DE", …}
13: {player_id: "089df523-86dd-4705-944f-f012adb5a0f8", nickname: "dream3r---", status: "AVAILABLE", games: Array(1), country: "BG", …}
14: {player_id: "b8b709e5-96f8-4cf5-8348-95b8b67e0b34", nickname: "DreadAV", status: "AVAILABLE", games: Array(1), country: "RU", …}
15: {player_id: "5fd703b0-6762-44c8-9284-b8f01ef70e71", nickname: "DendiGoD", status: "AVAILABLE", games: Array(1), country: "UA", …}
16: {player_id: "6c4f1a76-1341-4513-90ac-8d43dd1c86b6", nickname: "dipparn", status: "AVAILABLE", games: Array(1), country: "SE", …}
17: {player_id: "ae0bfe74-ec96-4499-910f-e02acd5be700", nickname: "DuBu-", status: "AVAILABLE", games: Array(1), country: "CA", …}
18: {player_id: "d6bc4849-5256-4463-a38e-bcd77fc31ff9", nickname: "device", status: "BUSY", games: Array(1), country: "DK", …}
19: {player_id: "4bb4503f-5272-40dc-8165-d050290db66a", nickname: "desi", status: "AVAILABLE", games: Array(1), country: "US", …}
length: 20
__proto__: Array(0)
length: 1
__proto__: Array(0)
Then i pass it to a component like that:
{
!isLoading &&
<PlayerSearchResult players={names} />
}
My component:
class PlayerSearchItem extends Component {
public render() {
return (
<li key={this.props.cle}>
<Link to={"#"}>nom - {this.props.pseudo}</Link>
</li>
);
}
}
class PlayerSearchResult extends Component {
public render() {
return (
<div>
<ul>
{Object.keys(this.props.players).map((player, i) => (
<PlayerSearchItem
cle={player[player].player_id}
pseudo={players[i]}
/>
))}
</ul>
</div>
);
}
}
don't mind the way I'm targeting my data, it's one of my many tries.
I think that your map looks wrong
This:
Object.keys(this.props.players).map((player, i) => ( <
PlayerSearchItem cle = {
player[player].player_id
}
pseudo = {
players[i]
}
/>
))
Should be:
Object.keys(this.props.players).map((player, i) => ( <
PlayerSearchItem cle = {
player.player_id
}
pseudo = {
player
}
key={player.player_id}
/>
))
Then from the screenshot of your data, it looks like you have as data an array of 20 items, which has as first element an array of 20 items, where the items from 1 to 20 are the real players.