I have a product object and inside that object has an answer object and inside that has a photo property where some answers have photos. I tried creating a method that loops through every images array and creates and img tag and includes that src link but for some reason its not showing any image. I even console logged it and the links were appearing. Is there some simple way to do this that I’m missing?
JavaScript
x
105
105
1
import React, { useState } from 'react';
2
3
const Answer = ({answerObj}) => {
4
5
const handleImages = () => {
6
answerObj.photo.images.forEach(pic => {
7
console.log(pic);
8
return (
9
<img src={pic}
10
alt="some photo"
11
width="200px"
12
height="200px"
13
/>
14
);
15
})
16
};
17
18
return (
19
<div>
20
<div className="photoInfo">
21
<br />
22
<p>{answerObj.photo.photoBody}</p>
23
<br />
24
{answerObj.photo.images.length > 0 ? (
25
<div>
26
{handleImages()}
27
// commented out <img src={answerObj.photo.images[0]}
28
// commented out alt="some photo"
29
// commented out width="200px"
30
// commented out height="200px" />
31
</div>): null}
32
</div>
33
</div>
34
);
35
};
36
37
export default Answer;
38
39
DummyData:
40
const dummyData = [
41
{
42
productId: 100,
43
questions: [{
44
questionId: 10,
45
helpfulCount: 67,
46
body: 'Is this watch waterproof?',
47
answers: [{
48
answerId: 500,
49
body: 'This works up to 5 meters underwater.',
50
user: 'User231',
51
photo: {
52
photoBody:'Here are some photos of the waterproof watches:',
53
images: ['some link', 'some link', 'some link'],
54
photoHelpfulCount: 33
55
},
56
helpfulCount: 43,
57
date: 'May 1, 2019',
58
isSeller: true,
59
isReported: false
60
},
61
{
62
answerId: 501,
63
body: `To a degree, I wouldn't test it out.`,
64
user: 'User420',
65
photo: {
66
photoBody:'',
67
images: [],
68
photoHelpfulCount: -1
69
},
70
helpfulCount: 0,
71
date: 'May 3, 2019',
72
isSeller: false,
73
isReported: false
74
},
75
{
76
answerId: 502,
77
body: 'I tested it out 7ft underwater and so far so good.',
78
user: 'User367',
79
photo: {
80
photoBody:'Here is a photo of my watch underwater:',
81
images: ['some link'],
82
photoHelpfulCount: 5
83
},
84
helpfulCount: 8,
85
date: 'May 6, 2019',
86
isSeller: false,
87
isReported: false
88
},
89
{
90
answerId: 503,
91
body: 'Tried it out at a water park and it stopped working.',
92
user: 'User514',
93
photo: {
94
photoBody:'Here are some photos of the aftermath:',
95
images: ['some link', 'some link'],
96
photoHelpfulCount: 2
97
},
98
helpfulCount: 4,
99
date: 'May 1, 2019',
100
isSeller: false,
101
isReported: false
102
}],
103
}],
104
}
105
Advertisement
Answer
Map and return the mapped array instead of using forEach
.
Also, it would be preferable to use JSX syntax (equivalent to React.createElement
) instead of invoking a function that returns a component. (Invoking a standard function that returns JSX can cause problems with hooks, among other things)
JavaScript
1
24
24
1
const Answer = ({ answerObj }) => {
2
return (
3
<div>
4
<div className="photoInfo">
5
<br />
6
<p>{answerObj.photo.photoBody}</p>
7
<br />
8
{answerObj.photo.images.length > 0 ? (
9
<div>
10
{answerObj.photo.images.map(pic => (
11
<img src={pic}
12
alt="some photo"
13
width="200px"
14
height="200px"
15
/>
16
)
17
)}
18
</div>)
19
: null}
20
</div>
21
</div>
22
);
23
};
24
or
JavaScript
1
24
24
1
const AnswerPhoto = ({ pic }) => (
2
<img src={pic}
3
alt="some photo"
4
width="200px"
5
height="200px"
6
/>
7
);
8
const Answer = ({ answerObj }) => {
9
return (
10
<div>
11
<div className="photoInfo">
12
<br />
13
<p>{answerObj.photo.photoBody}</p>
14
<br />
15
{answerObj.photo.images.length > 0 ? (
16
<div>
17
{answerObj.photo.images.map(pic => <AnswerPhoto pic={pic} />)}
18
</div>)
19
: null}
20
</div>
21
</div>
22
);
23
};
24