CODEWITHSUNDEEP
javascriptreactjstypescriptreact-nativeformik
user13101751
user13101751

Reputation:

can't type in Input field after changing onChangeText

I have a custom FieldInput icon where I use Native Base's input component. I use it for validation with Formik. When I use it like this:

 onChangeText={handleChange(fieldType)}

everything seems to work fine but I get an error on onChangeText that

  Overload 1 of 2, '(props: Readonly<Input>): Input', gave the following error.
    Type 'void' is not assignable to type '((text: string) => void) | undefined'.

When I change it to

 onChangeText={()=>handleChange(fieldType)}

the error is gone but then my input field stops working. I can no longer type into it. What am I doing wrong? My component looks like this:

type FieldInputProps = React.PropsWithRef<{
  handleChange: (e: string) => void;
  value: string;
  fieldType: string;
  placeholderText?: string;
  style?: object;
  rounded?: boolean;
}>;


export const FieldInput = React.forwardRef<Input, FieldInputProps>(({
  handleChange,
  fieldType,
  placeholderText,
  value,
  style,
  rounded,
}, ref) => {

  return (
    <Item rounded={rounded} style={[styles.inputItem, style]}>
      <Input 
        ref={ref}
        autoFocus={true}
        autoCapitalize="none"
        placeholder={placeholderText}
        keyboardType="default"
        onChangeText={handleChange(fieldType)}
        value={value}
       />
      </Item>
  );
});

Codesandbox: https://snack.expo.io/@nhammad/carefree-cereal

Upvotes: 1

Views: 492

Answers (1)

Rostyslav Broslavskyi
Rostyslav Broslavskyi

Reputation: 66

onChangeText is a function that takes 1 argument value

onChangeText is (value: string) => void

So you just need to use onChangeTextCallback like in the example below

 // ✅ Right way to do it!✅ 

const [value, setValue] = useState<string>('')

<TextInput value={value} onChangeText={setValue} />

// or onChangeText={(newValue: string) => setValue(newValue)}

// Your code
// ❌ Wrong way to do it! ❌

onChangeText={()=>handleChange(fieldType)}
// You forget about value here
// onChangeText={(value: string)=> handleChange(fieldType)}
// You need to provide value to your changing value callback

Let me know if it helps you!🤸‍♂️

UPD:

Check the link -> https://snack.expo.io/bLEsPJXPS

Upvotes: 2

Related Questions