'React-Native: Error: Objects are not valid as a React child (found: object with keys {}). use an array instead
I'm creating an app with react-native and I wanted to create a scrollView with some divs inside and I used .map() to create them using the info from another file that has an array of info.
Here's the code
import { events } from "../Data/Events.js";
export default function HomeScreen(navigation) {
return (
<SafeAreaView
style={{
marginBottom: 60,
}}
>
{/* header */}
<View style={styles.header}>
<Text style={styles.title}>Young & Bored</Text>
<Image
source={require("../Images/florkofcowsCoin.png")}
style={styles.coinImage}
/>
</View>
<ScrollView style={styles.scrollView}>
{/* Search Bar */}
<View style={styles.searchBar}>
<Ionicons
name="search"
size={20}
style={{
marginRight: 5,
marginLeft: 8,
}}
/>
<TextInput
style={{
marginLeft: 5,
justifyContent: "center",
fontSize: 15,
}}
placeholder="Search"
></TextInput>
</View>
<View style={styles.h2}>
<Text
style={{
fontSize: 25,
}}
>
Explore Events
</Text>
</View>
//here's where I use .map()
{events.map( (event) => (<EventComponent
key={event.id}
name={event.name}
day={event.day}
month={event.month}
type={event.type}
image={event.image}
/>))}
</ScrollView>
</SafeAreaView>
);
}
It gives me this Error
Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.
This error is located at:
in RCTText
in TouchableText (created by Text)
in Text (created by EventComponent)
in RCTView (created by View)
in View (created by NativeLinearGradient)
in NativeLinearGradient (created by LinearGradient)
in LinearGradient (created by EventComponent)
in RCTView (created by View)
in View (created by ImageBackground)
in ImageBackground (created by EventComponent)
in EventComponent (created by HomeScreen)
in RCTView (created by View)
in View (created by ScrollView)
in RCTScrollView (created by ScrollView)
in ScrollView (created by ScrollView)
in ScrollView (created by HomeScreen)
in RNCSafeAreaView (created by HomeScreen)
in HomeScreen (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by BottomTabView)
in RCTView (created by View)
in View (created by Screen)
in RCTView (created by View)
in View (created by Background)
in Background (created by Screen)
in Screen (created by BottomTabView)
in RNSScreen (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by Screen)
in MaybeFreeze (created by Screen)
in Screen (created by MaybeScreen)
in MaybeScreen (created by BottomTabView)
in RNSScreenContainer (created by ScreenContainer)
in ScreenContainer (created by MaybeScreenContainer)
in MaybeScreenContainer (created by BottomTabView)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by SafeAreaInsetsContext)
in SafeAreaProviderCompat (created by BottomTabView)
in BottomTabView (created by BottomTabNavigator)
in Unknown (created by BottomTabNavigator)
in BottomTabNavigator (created by BottomNav)
in BottomNav (created by App)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by App)
in App (created by ExpoRoot)
in ExpoRoot
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:172:19 in handleException
at node_modules/react-native/Libraries/Core/ReactFiberErrorDialog.js:43:2 in showErrorDialog
Here's the file Events.js
export const events = [
{
name: 'Football Tournament',
type: 'Sport',
day: "21",
month: 'Apr',
image: require("../assets/FootTournament.jpg"),
id: "1"
},
{
name: 'Football Tournament',
type: 'Sport',
day: "21",
month: 'Apr',
image: require("../assets/FootTournament.jpg"),
id: "2"
},
{
name: 'Football Tournament',
type: 'Sport',
day: "21",
month: 'Apr',
image: require("../assets/FootTournament.jpg"),
id: "3"
},
{
name: 'Football Tournament',
type: 'Sport',
day: "21",
month: 'Apr',
image: require("../assets/FootTournament.jpg"),
id: "4"
}
];
I don't know what to do, because before it was working and suddenly this error shows up, could you help me, please.
Solution 1:[1]
The solution is simple:
...
export default function HomeScreen({navigation}) {
return (
...
If anyone needs more explanation can look at this post, here's where I found the solution.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | Aissa Rouk |