'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.

navigation.navigate is not a function

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