How to properly solve the TS2345 problem?

Question

JavaScript

Hello! I'm learning TypeScript and I'm having trouble with mouse events. There is an image and when you hover the mouse over it, the function should work. There are several images, and depending on the image, a certain argument is passed to the function. This argument is a string. All done in React. But I get error TS2345: Argument of type 'string' is not assignable to parameter of type 'MouseEvent '. I can’t understand what then to prescribe in the interface so that the string can be passed as an argument. I tried to find information on this situation with MouseEvent on the Internet, but did not succeed.

This is what this img looks like

<img
              onMouseEnter={() => { handleChangeInfoMain(design); }}
              onMouseLeave={infoMainSetTimeout}
              className="info-main__logo"
              src={infoMainValue.img.imgName === 'design' ? designActive : designNoActive}
              alt="logo"
            />

Here is what part of the interface looks like

handleChangeInfoMain: MouseEventHandler<HTMLImageElement>,
  infoMainSetTimeout: MouseEventHandler<HTMLImageElement>,

And this is how the handleChangeInfoMain function looks like in the App component

const handleChangeInfoMain = (value : string): void => {
    if (value === 'design') {
      console.log(value);
    } else {
      console.log('ничего');
    }
  };

Thank you in advance for your help.

Answer 1

What is MouseEventHandler? This is a function that takes an event of type MouseEvent as an argument and returns empty
. You have the handleChangeInfoMain function typed as MouseEventHandler, although the argument is typed string
.
handleChangeInfoMain: (value: string) => void