I am getting data from a 3rd party API. When I console.log the data it shows in console but then is followed by Uncaught TypeError: Cannot read properties of undefined (reading 'tweet_results')
I don’t actually get to see anything on the screen when I try the return as well, even though I have some conditions in there.
JavaScript
x
34
34
1
const LatestTweets = () => {
2
const [tweets, setTweets] = useState([]);
3
useEffect(() => {
4
const getTweets = async () => {
5
try {
6
const response = await axios.get(
7
"https://myendpoint.com"
8
);
9
10
setTweets(
11
response.data.data.user.result.timeline.timeline.instructions[1]
12
.entries
13
);
14
} catch (err) {
15
console.log(err);
16
}
17
};
18
getTweets();
19
}, []);
20
21
const test = tweets.map((t) => {
22
console.log(t.content.itemContent.tweet_results.result.legacy.full_text);
23
});
24
25
return (
26
<div>
27
{tweets &&
28
tweets.length &&
29
tweets.map((t) => (
30
<p>{t.content.itemContent.tweet_results.result.legacy.full_text}</p>
31
))}
32
</div>
33
);
34
Advertisement
Answer
It seems like tweet_results can not contain in some objects from real data. So, to prevent from this error use ?. to go inside object.
JavaScript
1
34
34
1
const LatestTweets = () => {
2
const [tweets, setTweets] = useState([]);
3
useEffect(() => {
4
const getTweets = async () => {
5
try {
6
const response = await axios.get(
7
"https://myendpoint.com"
8
);
9
10
setTweets(
11
response.data.data.user.result.timeline.timeline.instructions[1]
12
.entries
13
);
14
} catch (err) {
15
console.log(err);
16
}
17
};
18
getTweets();
19
}, []);
20
21
const test = tweets.map((t) => {
22
console.log(t.content?.itemContent?.tweet_results?.result?.legacy?.full_text);
23
});
24
25
return (
26
<div>
27
{tweets &&
28
tweets.length &&
29
tweets.map((t) => (
30
<p>{t.content?.itemContent?.tweet_results?.result?.legacy.full_text}</p>
31
))}
32
</div>
33
);
34