javascript - How can I pass a prop to onBlur() and use a predefined function at the same time (React Native)?

Question

I have a Text Input component that change its background color using onBlur and onFocus events. What I want to do is to pass another function to onBlur using props, so the component would perform both actions.

This is my component:

const Input: React.FC<TextInputProps> = (props) => {
    const [color, setColor] = useState("#f2f2f2");

    return (
        <TextInput
            onFocus={() => setColor('#f9ffc4')}
            onBlur={() => setColor('#f2f2f2')} // I would like to use props.onBlur here in addition to setColor()
            onChangeText={props.onChangeText}
            style={{ backgroundColor: color }}
            value={props.value}
        >
        </TextInput>
    )
}

export default Input; 

And this is how I use it:

return (
    <Input
        onChangeText={ handleChange('cpf') }
        value={values.cpf}
        onBlur={() => setFieldTouched('cpf')} //I want to call it along with the method declared in the component
    />
    {touched.cpf && errors.cpf &&
        <Text style={{ color: 'red', width: '100%', textAlign: 'right' }}>{errors.cpf} </Text>
    }
)

I know that I could use setColor() here, but I have lots of other inputs and if I did that, I would have to create an useState const for each one of them, and that's not what I want.

If someone could help me here I would really appreciate it, and if something is not clear in my question, just ask me and I will try to explain better.

question from:https://stackoverflow.com/questions/65889482/how-can-i-pass-a-prop-to-onblur-and-use-a-predefined-function-at-the-same-time

Answer 1

onBlur={() => {
  setColor('#f2f2f2');
  props.onBlur();
}}

Is this what you want?