'function are not valid as a react child

why is this error coming. i don't know what to do. please help me 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. at node_modules\react-native\Libraries\LogBox\LogBox.js:174:8 in registerError

        import { View, Button } from 'react-native';
        import {
            Container,
            Header,
            Content,
            ListItem,
            Text,
            Radio,
            Right,
            Left,
            Picker,
            Icon,
            Body,
            Title
        } from 'native-base';
        
        const methods = [
            { name: 'Cash on Delivery', value: 1 },
            { name: 'Bank Transfer', value: 2 },
            { name: 'Card Payment', value: 3}
        ]
        
        const paymentCards = [
            { name: 'Wallet', value: 1 },
            { name: 'Visa', value: 2 },
            { name: 'MasterCard', value: 3},
            { name: 'Other', value: 4}
        ]
        
        const Payment = (props) => {
        
            const order = props.route.params;
        
            const [selected, setSelected] = useState();
            const [card, setCard] = useState();
            return(
               <Container>
                   <Header>
                       <Body>
                           <Title>Choose your payment method</Title>
                       </Body>
                   </Header>
                   <Content>
                       {methods.map((item, index) => {
                           return (
                               <ListItem key={item.name} onPress={() => setSelected(item.value)}>
                                   <Left>
                                    <Text>{item.name}</Text>
                                   </Left>
                                   <Right>
                                       <Radio selected={selected == item.value}/>
                                   </Right>
                               </ListItem>
                           )
                       })}
                       {selected == 3 ? (
                           <Picker
                            mode="dropdown"
                            iosIcon={<Icon name={"arrow-down"} />}
                            headerStyle={{ backgroundColor: 'orange' }}
                            headerBackButtonTextStyle={{ color: '#fff' }}
                            headerTitleStyle={{ color: '#fff' }}
                            selectedValue={card}
                            onValueChange={(x) => setCard(x)}
                           >
                               {paymentCards.map((c, index) => {
                                   return <Picker.Item 
                                   key={c.name} 
                                   label={c.name} 
                                   value={c.name} />
                               })}
                           </Picker>
                       ) : null }
                       <View style={{ marginTop: 60, alignSelf: 'center' }}>
                               <Button 
                               title={"Confirm"} 
                               onPress={() => props.navigation.navigate("Confirm", { order })}/>
                       </View>
                   </Content>
               </Container>
            )
        }
        
        export default Payment;

Solution 1:^[1]

Check the return() block in LogBox.js, and see how your component Payment is invoked.

If you invoke a component as a function inside of a return, or a render method in a class component, it would probably throw this issue.

Example:


function MyComponent () {
  return (<div>Hello</div>)
}

function OtherComponent() {
  return (
    <Fragment>
      <h1>Some header here</h1>

      {MyComponent}    <--- error
      MyComponent()   <-- error
      <MyComponent /> <-- correct
    
      {someCondition && MyComponent} <-- error
      {someCondition && <MyComponent />} <-- correct

      {someArray.map(item => MyComponent(item))} <-- error
      {someArray.map(item => <MyComponent item={item} />} <-- correct  
    </Fragment>
  )
}

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

'function are not valid as a react child

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]