I'm making a react native app on Expo, but the whole app crashes everytime I try to get into this one page. This is my first time using react native, and I'm still a beginner to react, but I can't see what's causing the issue. The error I'm getting is Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it., but I can't see where

import { StyleSheet, Text, View, TouchableOpacity, ScrollView, TextInput } from 'react-native'
import React, { useState, useEffect } from 'react'
// import CartCard from '../Components/CartCard'
import ItemCard from '../Components/ItemCard'

const Cart = ({navigation}) => {

  const [details, setDetails] = useState([])

  useEffect(()=>{
      getData() 
    }, []) 

  const getData = async() => {
    try {
      const getValues = await AsyncStorage.getItem('object')
      if(getValues !== null){
        console.log(JSON.parse(getValues))
        setDetails(getValues)
        // const objectValues = JSON.parse(getValues)
        // setDetails(objectValues)
        // getValues.forEach(object => {
        //   console.log("id:", object.id)
        //   setToyId(object.id)
        // })
      }
    }catch(error){
      console.log('getData didnt work')
    }
  }

  const [cardholder, setCardholder] = useState('');
  const [cardNumber, setCardNumber] = useState('');
  const [expiryDate, setExpiryDate] = useState('');
  const [cvc, setCvc] = useState('');

  const [allItems, setAllItems] = useState(0);
  const [total, setTotal] = useState(0)

  const clearCart = () => {
    console.log('cc')
  }

  const countAllItems = () => {
    console.log('cai')
  }

  const countTotal = () => {
    console.log('ct')
  }

  return (
    <ScrollView style={{backgroundColor: 'white', height: '100%'}}>
      <ItemCard />
        <View>
          <View style={styles.payment}>
            <Text>Your Shopping Cart</Text>
            <View>
              <Text value={allItems} onChangeText={(value)=>{setAllItems(value)}}>Overall Items: {countAllItems}</Text>
              <Text value={total} onChangeText={(value)=>{setTotal(value)}}>Total Price: ${countTotal}.00</Text>
            </View>
          </View>
          <Text>Payment</Text>
          <TextInput placeholder='Cardholder Name' style={styles.inputsLong} placeholderTextColor='black' value={cardholder} onChangeText={(value)=>setCardholder(value)}/>
          <TextInput placeholder='Card Number' style={styles.inputsLong} placeholderTextColor='black' value={cardNumber} onChangeText={(value)=>setCardNumber(value)}/>
          <View style={styles.shortForm}>
            <TextInput placeholder='MM/YY' style={styles.inputsShort} placeholderTextColor='black' value={expiryDate} onChangeText={(value)=>setExpiryDate(value)} />
            <TextInput placeholder='CVC' style={styles.inputsShort} placeholderTextColor='black' value={cvc} onChangeText={(value)=>setCvc(value)}/>
          </View>
          <View style={styles.buttonRow}>
            <TouchableOpacity>
              <Text style={styles.cancelButton} onPress={clearCart}>Cancel Order</Text>
            </TouchableOpacity>
            <TouchableOpacity>
              <Text style={styles.orderButton} onPress={()=>navigation.navigate('ConfirmScreen')}>Place Order</Text>
            </TouchableOpacity>
          </View>
        </View>
    </ScrollView>
  )
}

export default Cart

const styles = StyleSheet.create({ // styles })

ItemCard component doesn't take any parameters yet because I'm having problems storing data and passing data between pages, but this is what the component looks like in its current state:

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

const ItemCard = () => {

    return (
    <ScrollView>
        <View style={styles.itemSection}>
            <View style={styles.card}></View>
        </View>
    </ScrollView>
  )
}

export default ItemCard

const styles = StyleSheet.create({ // styles })

CodePudding user response：

For this warning

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

you have to call the functions eg. countTotal()

 <Text value={total} onChangeText={(value)=>{setTotal(value)}}>Total Price: ${countTotal()}.00</Text>

if you are using onPress then like this

<Text style={styles.cancelButton} onPress={()=>clearCart()}>Cancel Order</Text>