CODEWITHSUNDEEP
reactjsreact-nativeexpo
Sambulo Senda
Sambulo Senda

Reputation: 1418

Invariant Violation: Objects are not valid as a React child (found: object with keys {text, onPress})

When I run the react native app using expo I get the following error.

I get the following error. 

Invariant Violation: Objects are not valid as a React child (found: object with keys {text, onPress}). If you meant to render a collection of children, use an array instead.
    in RCTText (at Text.js:154)
    in TouchableText (at Text.js:278)
    in Text (at ClearButton.js:10)
    in RCTView (at View.js:45)
    in View (at ClearButton.js:8)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at TouchableOpacity.js:282)
    in TouchableOpacity (at ClearButton.js:7)
    in ClearButton (at Home.js:49)
    in RCTView (at View.js:45)
    in View (at Container.js:8)
    in Container (at Home.js:33)
    in Home (at app/index.js:9)
    in _default (at withExpoRoot.js:20)
    in RootErrorBoundary (at withExpoRoot.js:19)
    in ExpoRootComponent (at renderApplication.js:35)
    in RCTView (at View.js:45)
    in View (at AppContainer.js:98)
    in RCTView (at View.js:45)
    in View (at AppContainer.js:115)
    in AppContainer (at renderApplication.js:34)
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:8070:6 in throwOnInvalidObjectType
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:9133:31 in reconcileChildFibers
- ... 20 more stack frames from framework internals

The code that I have on that class is. I don't know what is wrong in the following code. Please help. 

import React from 'react';
import { TouchableOpacity, View, Text, Image} from 'react-native';
import PropTypes from 'prop-types';
import styles from './styles';

const ClearButton = (text, onPress) => (
<TouchableOpacity onPress={onPress}>
    <View>
        <Image source={require('./images/logo.png')} />
        <Text>{text}</Text>
    </View>
</TouchableOpacity>
);


ClearButton.PropTypes ={
    text : PropTypes.string, 
    onPress : PropTypes.fun,

};

export default ClearButton;

Upvotes: 2

Views: 395

Answers (1)

aldenn
aldenn

Reputation: 2280

Functional component of React receive props as first argument like this:

const ClearButton = (props) => {
   // get keys in props
   const text = props.text;
   const onPress = props.onPress
   ...
}

So, if you want to write with destructuring, you can re-write component like this:

const ClearButton = ({ text, onPress }) => ( // use destructuring here
<TouchableOpacity onPress={onPress}>
    <View>
        <Image source={require('./images/logo.png')} />
        <Text>{text}</Text>
    </View>
</TouchableOpacity>
);

Upvotes: 4

Related Questions