Search code examples
reactjsmaterial-uievent-handlingonchange

'event' is deprecated- what to use instead for React change handlers


I am currently building a React app with Material UI. I'm trying to build a Select component with a dropdown, and as I'm writing the handleChange function, I am getting a warning that my function parameter event is deprecated.

I've seen this before when editing other applications with functions that depend on an event variable. Looking online, I've seen recommendations to use .bind or .addEventListenerinstead, but I don't totally understand how these work. It also seemingly makes the code way uglier...

I guess I'm just looking for some advice as to how I would implement these alternatives in the case of a MUI Select component. This is what I want to write:

const handleChange= (event: any) => {
  setState(event.target.value);
};

So that I could easily use it in the render function:

   <Select
      native
      value={binary}             \\ (state variable)
      onChange={handleChange}    \\ (nice and simple function ref)
      inputProps={{
        name: 'binary',
        id: 'binary-select',
      }}
   >

If event is deprecated, am I risking a loss of functionality in the future by using it? If I should use these alternative solutions I've seen online instead, how would I apply them in this case?

Thanks!


Solution

  • I guess VSCode was mistaking my event paramter as the GLOBAL event handler, which is deprecated. As noted by others' comments, using event as a parameter is perfectly okay!

    'Problem' solved.