Converting inline function to normal function

Question

I am looking to convert an inline function of the following signature to a non-inline function

const onMouseEnter = (itemName: string): void => {
 alert(itemName);
};

I tried doing as follows but that doesn't seem to work.

function onMouseEnter(itemName: string) {
 alert(itemName);
};

Here is my codesandbox where it does not compile using the signature above.

https://codesandbox.io/s/frosty-buck-wt66b?file=/src/App.tsx

Answer 1

I checked your codesandbox and it works for me with a little correction. Just be careful to call the onMouseEnter2 the same way you call the first one (using the arrow function on the event handler) - Otherwise you are triggering the function each time you render:

function onMouseEnter2(itemName: string){
  alert(itemName);
};

const addIcon: IIconProps = { iconName: "Add" };

export default function App() {
  return (
    <CommandButton
      //onMouseEnter={() => onMouseEnter("title")}
      onMouseEnter={() => onMouseEnter2('title')}
      iconProps={addIcon}
      text="New item"
      menuProps={menuProps}
    />
  );
}

However I'd like to remind you that it is not good practice to define function inside a functional component as they'll be defined each time the component is rendered. The following thread is interesting on the subject:

Where should functions in function components go?