I have made a reusable textinput component in react native, but when I am trying to access text value it gives me synthetic event object then the text value, I am not able to target text value. I know this maybe a possible duplicate but I have tried many methods but it isn't working. Here is my code snippet.
/**Imported Component **/
<InputField
placeholder="Disabilities"
defaultValue={values.associatedDisabilities.toString()}
onChange={(value) => console.log(value)}
/>
/**Reusable Component **/
<TextInput
style={[
styles.textInput,
props.style,
{ color: theme.colors.mainForeground },
]}
onChangeText={props.onChange}
defaultValue = {props.defaultValue}
value={props.value}
onBlur={props.onBlur}
{...props}
placeholderTextColor={
currentTheme === ThemeTypes.LIGHT
? theme.colors.secondaryText
: theme.colors.mainForeground
}
editable={props.editable}
selectTextOnFocus={props.editable}
/>
You need to pass it on the onChange in order to have the value you are looking for:
<TextInput
style={[
styles.textInput,
props.style,
{ color: theme.colors.mainForeground },
]}
onChangeText={(value) => props.onChange(value)}
defaultValue = {props.defaultValue}
value={props.value}
onBlur={props.onBlur}
{...props}
placeholderTextColor={
currentTheme === ThemeTypes.LIGHT
? theme.colors.secondaryText
: theme.colors.mainForeground
}
editable={props.editable}
selectTextOnFocus={props.editable}
/>
In second place, you need to control imported comp:
<InputField
placeholder="Disabilities"
defaultValue={values.associatedDisabilities.toString()}
onChange={(value) => console.log(value)}
value
/>
Otherwise you can use event.target.value, that is the native event value of the input component