i have a problem about when i trying mapping my data. I want a reach company name in supplier in products. How can i fix it?
JavaScript
x
50
50
1
{products.map((repo) => (
2
<div
3
style={{
4
backgroundColor: "#c1d3d4",
5
marginTop: 50,
6
display: "flex",
7
flexDirection: "column",
8
minWidth: 1000,
9
paddingLeft: 50,
10
marginLeft: 400,
11
paddingRight: 30,
12
paddingBottom: 12,
13
borderRadius: 15,
14
}}
15
span={24}
16
>
17
<p style={{ flex: 1, fontWeight: "bold", fontSize: 26 }}>
18
{repo.name}
19
</p>
20
21
<p style={{ fontWeight: "bold", fontSize: 14 }}>{repo.supplier.companyName}</p>
22
23
<p style={{ fontWeight: "bold", fontSize: 14 }}>
24
{repo.quantityPerUnit}
25
</p>
26
<div
27
style={{
28
display: "flex",
29
flexDirection: "row",
30
justifyContent: "space-between",
31
alignContent: "flex-end",
32
}}
33
>
34
<p
35
style={{
36
fontSize: 20,
37
fontWeight: "800",
38
color: "green",
39
alignSelf: "flex-end",
40
}}
41
>
42
{repo.unitPrice.toFixed(2)}
43
</p>
44
<Button type="primary" onClick={() => AddCart(repo)}>
45
Sepete Ekle
46
</Button>
47
</div>
48
</div>
49
))}
50
this is error message error
this is data:
https://northwind.vercel.app/api/products
edit:
@Tim Roberts found the solution. Only some elements have a supplier so other one’s dont have. i took the error message when i try map. I understand now.
Advertisement
Answer
I think the error occurs because in some data from the api, the supplier prop doesn’t exist.
Your code
JavaScript
1
2
1
<p style={{ fontWeight: "bold", fontSize: 14 }}>{repo.supplier.companyName}</p>
2
Possible Solution
JavaScript
1
2
1
<p style={{ fontWeight: "bold", fontSize: 14 }}>{repo.supplier && repo.supplier.companyName}</p>
2