why this code show error ( Invariant Violation: Cannot specify both value and children)?

Question

why this code show error ( Invariant Violation: Cannot specify both value and children) ?

why, when I run this code showing me (the error Invariant Violation: Cannot specify both value and children)?

I do some ways to resolve errors, but it does not result

I don`t know how to resolve this error. and please help me.

(Unfortunately, I cannot provide more details than this)

import React,{Fragment} from 'react';
import {Alert, StyleSheet,View} from 'react-native';
import Inputcomponent from './Inputcomponent';
import { Button} from 'react-native-elements'
import {Formik} from  'formik';
class  Formik_1 extends React.Component{
  _handlesubmit=(values)=>{
        Alert.alert("Form values",JSON.stringify(values))
    }
     render(){
        return(

          <Formik 
                initialValues={{number:'',
                 date:'',Names:'',NameProduct:''
                }}
                onSubmit={this._handlesubmit} 
             >
              
           {({values, handleSubmit, handleChange, handleBlur,})=>(
               <View>
                       <Inputcomponent  cap="Number" 
                                        icon={{ type: 'evilicon', name: 'eye' , color:'black',size:35}} 
                                        value={values.number} 
                                         onChangeText={handleChange('number')}
                                        onBlur={handleBlur('number')} 
                                        
                                        /> 

                        <Inputcomponent cap="Date" 
                                        icon={{ type: 'evilicon', name: 'calendar' , color:'black',size:35}}
                                        value={values.date}   
                                         onChangeText={handleChange('date')}
                                        onBlur={handleBlur('date')}
                                        /> 
                        <Inputcomponent cap=" XXX"  
                                        icon={{ type: 'evilicon', name: 'plus' , color:'black',size:35}} 
                                        value={values.Names}  
                                        onChangeText={handleChange('Name')}
                                        onBlur={handleBlur('Name')}
                                        /> 
                        <Inputcomponent cap="UUU" 
                                        icon={{ type: 'evilicon', name: 'gear' , color:'black',size:35}}
                                        value={values.NameProduct}  
                                        onChangeText={handleChange('NameProduct')}
                                        onBlur={handleBlur('NameProduct')}
                                        />
                        <Button     buttonStyle={{width:200, margin:10}}
                                    style={Styles.btn} title="ذخیره" onPress={handleSubmit}
                        />
                     
                        </View>
               
                )}
                
                
               </Formik>
            
           
        );
     }

}

const Styles=StyleSheet.create({
    btn:{
     
      height:35,
      backgroundColor:'blue',
      margin:20

    }
});
export default Formik_1;

and children component have this code :

import React ,{PureComponent} from 'react';
import {StyleSheet,View} from 'react-native';
import {Input,errorMessage ,Label} from 'react-native-elements';
import { Icon } from 'react-native-elements'
class Inputcomponent extends PureComponent {
    state={};
    render(){
        const {cap,icon,...rest}=this.props;
    return(
        <View style={styles.root}>
        <Input
               label={cap} 
               errorMessage='this is onvalid'
               leftIcon={icon}
               {...rest}
                         
        > </Input >
          </View>
        );
     }
    };
  
 const styles=StyleSheet.create({
    root: {
        width: '90%',
        alignSelf: 'center',
        backgroundColor:"#DBE9FE",
        marginTop:10,
        borderRadius:15,
        height:60,
         

      },
 });  
 
export default Inputcomponent;

Answer 1

Check your InputContainer.js, It is expecting children props. Try making it a self closing Input like this

            <Input
               label={cap} 
               errorMessage='this is invalid'
               leftIcon={icon}
               {...rest}
                         
            /> 

I believe this should work. if it doesn't, you can share more info and we tackle it