Objects are not valid as a React child found: object with keys {cca2, currency, callingCode, region, subregion, flag, name} - react-native

Question

I am using component with AppPicker that selects a country then passes the selected country to another component through navigation.navigate('component', { parameter: parameter}), my problem is, I am getting Objects are not valid as a React child. the AppPicker's onselect method returns an array of objects as shown below and I have a function that extracts only the country name, the country name is stored in country state and I pass that to another component for display. Can anyone help with this problem. my components are shown below:
Covid.js
import React, { useState } from 'react';
import { StyleSheet, TouchableOpacity, Text, View } from 'react-native';
import CountryPicker from 'react-native-country-picker-modal'
export default function App(props) {
const [country, setCountry] = useState(null) ;
const getCountry = (country) => {
return country.name;
}
return (
<View style={styles.container}>
{/* <TouchableOpacity onPress={ () => props.navigation.navigate('CovidCountryData', { selectedCountry: country})}> */}
<Text>
Welcome to Country Picker !
</Text>
<CountryPicker
withFilter
onSelect={(country) => {
const countrySelect= getCountry(country)
setCountry(countrySelect);
console.log(countrySelect);
props.navigation.navigate('CovidCountryData', { selectedCountry: country})
}}
/>
{/* </TouchableOpacity> */}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
the onselect returns the array shown below
Object {
"callingCode": Array [
"213",
],
"cca2": "DZ",
"currency": Array [
"DZD",
],
"flag": "flag-dz",
"name": "Algeria", =================> this is the country name I am extracting..
"region": "Africa",
"subregion": "Northern Africa",
}
CovidCountryData.js
import React from 'react'
import {Text, StyleSheet} from 'react-native';
export default function CovidCountryData(props) {
//console.log(props.navigation)
let Country = props.navigation.getParam('selectedCountry'); //selectedCountry
console.log(Country) ;
return (
<>
<Text>You have selected the country shown below</Text>
<Text>{Country}</Text>
</>
)
}

Answer 1

Here, you are sending through the navigation the whole country object received from the onSelect function inside your CountryPicker, because the variable shares the same name as the one you're keeping in state. Refactor it this way to understand the changes:
<CountryPicker
withFilter
onSelect={(selectedCountry) => {
const countrySelect= getCountry(selectedCountry)
setCountry(countrySelect);
console.log(countrySelect);
props.navigation.navigate('CovidCountryData', { selectedCountry: country}) // before even if you sent the country as param here, it wasn't the country from your state, but the one which is now called selectedCountry
}}
/>