Error in viewing item detail and TypeError: Cannot read property 'title' of undefined - Expo React Native - react-native

Question

When trying to access the detail of the article, it prints the following error message, adding these lines of code:
13 | return (
14 | <View>
15 | <View>
> 16 | <Text>{article.title}</Text>
| ^ 17 | </View>
18 | </View>
19 | )
List of articles NewsListScreen.js
import React, { useEffect } from 'react';
import { StyleSheet, Text, View, FlatList } from 'react-native';
import { useSelector, useDispatch } from 'react-redux';
import * as NewsAction from '../redux/actions/NewsAction';
import Card from '../components/Card';
const NewsListScreen = props => {
const dispatch = useDispatch();
useEffect(() => {
dispatch(NewsAction.fetchArticles())
}, [dispatch]);
const articles = useSelector(state => state.news.articles);
console.log(articles);
return (
<FlatList
data={articles}
keyExtractor={item => item.url}
renderItem={({item}) => (
<Card navigation={props.navigation}
title={item.title}
description={item.description}
image={item.urlToImage}
url={item.url}
/>
)}
/>
)
}
const styles = StyleSheet.create ({
});
export default NewsListScreen;
Print item detail NewsItemScreen.js
import React from 'react';
import { StyleSheet, Text, View, Platform, ImageBackground } from 'react-native';
import { useSelector } from 'react-redux';
const NewsItemScreen = props => {
const articleUrl = props.navigation.getParam('articleUrl');
//console.log(articleUrl);
const article = useSelector(state => state.news.articles.find(article => article.url === articleUrl));
//console.log(article);
return (
<View>
<View>
<Text>{article.title}</Text>
</View>
</View>
)
}
const styles = StyleSheet.create ({
});
export default NewsItemScreen;
When I replace this <Text>{article.title}</Text> with <Text>Hello!</Text> it shows the screen printing Hello! with no error.
These articles are the ones that are listed and the ones that are shown in the console correctly, the same ones that I try to see the complete detail, but I get the error message already mentioned.
author: "Megan Rose Dickey"
content: "Hellllooooo, 2021! Welcome back to Human Capital, a weekly newsletter that details the latest in the realms of labor, and diversity and inclusion.
↵Not a ton happened this week so I figured Id use th… [+6204 chars]"
description: "Hellllooooo, 2021! Welcome back to Human Capital, a weekly newsletter that details the latest in the realms of labor, and diversity and inclusion. Not a ton happened this week so I figured I’d use the time to look back on some of the more notable labor storie…"
publishedAt: "2021-01-02T20:00:52Z"
source:
id: "techcrunch"
name: "TechCrunch"
__proto__: Object
title: "Human Capital: The biggest labor stories of 2020"
url: "https://techcrunch.com/2021/01/02/human-capital-the-biggest-labor-stories-of-2020/"
urlToImage: "https://techcrunch.com/wp-content/uploads/2020/08/GettyImages-1142216084.jpg?w=601"
Code Proyect: https://github.com/Publisere/app-news-react
Note: It should be noted that the data does exist, it is not empty data.

Answer 1

Ok well...it seems that article is not defined 😂.
The first time this component is rendered, Article is undefined so you just need to wait (or display a loader, empty page, I let you manage that) before rendering article data.
import React from 'react';
import { StyleSheet, Text, View, Platform, ImageBackground } from 'react-native';
import { useSelector } from 'react-redux';
const NewsItemScreen = props => {
const articleUrl = props.navigation.getParam('articleUrl');
const article = useSelector(state => state.news.articles.find(article => article.url === articleUrl));
if (!article) return null;
return (
<View>
<View>
<Text>{article.title}</Text>
</View>
</View>
)
}
const styles = StyleSheet.create ({
});
export default NewsItemScreen;