It seems that some components like to pass an event as the first (or only) argument for a change event, eg (the native input, Material-UI's TextField) and then the programmer accesses the value with event.target.value, while other components will pass the value itself as the first arguement (eg. react-date-picker).

Here's a codepen demonstrating this: https://codesandbox.io/s/modern-cache-u8in9.

Where this becomes relevant is if I'm using a library like Formik, which has a handleChange handler which expects to be passed React.ChangeEvent objects, which it'll then look at for either an id or name, and a value.

So if I'm building some kind of complicated application that uses different components from different sources, then it's nice it would be nice to be able to handle their onChangeevents in a single way, rather than having to write different onChange handlers for different components.

What I was thinking is that one could make all of their onChange handles have a signature of something like:

(event?: React.ChangeEvent<any (or T?)>, value?: U, fieldName?: string) => void;

And that way, someone can use the component either the Formik way (where the first argument will be accessed, or the 'just pass the value' way, by accessing the second argument).

Is there any terms or established concepts that deal with this kind of thinking?

  • 1
    Note this question is subject on meta.
    – Doc Brown
    Nov 2, 2019 at 8:27


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Browse other questions tagged or ask your own question.