0

Buenas estoy teniendo el siguiente error en mi app cuando paso un objeto a un componente:

Uncaught Error: Objects are not valid as a React child

Y luego este screense lo quiero pasar a mi componente

EventScreen.js:

import { View, Text } from 'react-native'
import React from 'react'

const EventScreen = () => {

    const eventsMenta = [{
        id: '1',
        title: 'Evento Menta',
        date: new Date(2022,4,31)
        }
      ]

  return (
    <View>
      <EventItem
        title={eventsMenta[0].title}
        date={eventsMenta[0].date}
      
      ></EventItem>
    </View>
  )
}

export default EventScreen

y aca se encuentra el componente al que le estoy pasando a mi screen:

import { View, Text } from 'react-native'
import React from 'react'

const EventItem = (props) => {


  
  return (
    <View>
      <Text>{props.title}</Text>
      <Text>{props.date}</Text>
    </View>
  )
}

export default EventItem

Esta sería mi navigation donde a partir de mi login quiero pasar a la screen del evento:

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import React from 'react'
import SignInScreen from '../src/screens/SignInScreen/SignInScreen';
import EventScreen from '../src/screens/EventScreen/EventScreen';


const Stack  = createNativeStackNavigator();

const MainStack = () => {
  return (
    <NavigationContainer>
        <Stack.Navigator>

        <Stack.Screen
                name = "Login"
                component = {SignInScreen}
            />

            <Stack.Screen
                name = "Events"
                component = {EventScreen}
            />

        </Stack.Navigator>
    </NavigationContainer>
  )
}

export default MainStack

Mi pregunta es como puedo hacer para resolver este error ya que no me deja pasarle el objeto a mi componente.

1 respuesta 1

1

El problema no es que no puedas pasarle un objeto a un componente como props. De hecho, estás teniendo este error porque estas tratando de renderizar un objeto dentro de Text. Esta linea en particular es la que genera problemas

<Text>{props.date}</Text>

En su lugar, debes determinar lo que quieres mostrar. Por ejemplo, puedes hacer

<Text>{props.date.toLocaleString()}</Text> 

Lo anterior retorna un texto representativo de la fecha, aunque probablemente quieres lograr algo diferente. Ver toLocaleString()

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.