React Native Render Error - Error: Objects are not valid as a React child

Question

when I add the card component to app.js it shows the below error:

( Error: Objects are not valid as a React child (found: an object with keys {}). If you meant to render a collection of children, use an array instead ).

I did not add any objects to add keys. In the AppText component I have passed only the children props and used them as title and subtitles in the Card component

import React from 'react';
import Card from './app/components/Card';
import {View} from 'react-native';

export default function App() {
  return (
    <View
      style={{
      backgroundColor: '#f8f4f4',
      padding: 20,
      paddingTop: 100,
    }}>
      <Card
        title="Item 1"
        subTitle="$50 Million"
        image={require('./app/assets/image/card-img1.jpg')}
      />
   </View>
 );
}

this is the card component code

import React from 'react';
import {Image, StyleSheet, View} from 'react-native';
import colors from '../config/colors';
import AppText from './AppText';

function Card(image, title, subTitle) {
  return (
    <View style={styles.card}>
      <Image source={image} />
      <AppText>{title}</AppText>
      <AppText>{subTitle}</AppText>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    borderRadius: 15,
    backgroundColor: colors.white,
    marginBottom: 20,
  },
});

export default Card;

this is the AppText component

import React from 'react';
import {Text, StyleSheet, Platform} from 'react-native';
import colors from '../config/colors';

function AppText({children}) {
  return <Text style={styles.text}>{children}</Text>;
}

const styles = StyleSheet.create({
  text: {
    color: colors.black,
    ...Platform.select({
      ios: {
        fontSize: 20,
        fontFamily: 'Avenir',
      },
      android: {
        fontSize: 18,
        fontFamily: 'Roboto',
      },
    }),
  },
});

export default AppText;

nima · Accepted Answer · 2021-10-30 09:11:05Z

1

A simple change, make it work!

change your Card component definition from:

function Card(image, title, subTitle) {

to

function Card({image, title, subTitle}) {

Explanation:

When you want to pass property to a component, the input parameter of your component will be porps, if you want to destruct these props, you need to put a {} (the props is an object):

const myObject = {name: 'testName', title: 'testTitle'}

const {name, title} = myObject

answered Oct 30, 2021 at 9:11

nima

8,99312 gold badges40 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ali Abbasov · Accepted Answer · 2021-10-30 09:15:20Z

0

In your Card functional component, you should destructure the props that are passed to it.

In addition, the order of the props in declaration and usage should coincide with each other.

Changes

From:

function Card(image, title, subTitle)

To:

function Card({title, subtTitle, image})

answered Oct 30, 2021 at 9:15

Ali Abbasov

1131 gold badge2 silver badges7 bronze badges

Collectives™ on Stack Overflow

React Native Render Error - Error: Objects are not valid as a React child

2 Answers 2

Explanation:

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Explanation:

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related