# JSX props should not use arrow functions


react-router-navigation-prompt
```
./src/components/FormDragAndDropArea/index.tsx
  Line 61:  JSX props should not use arrow functions  react/jsx-no-bind
```

Error is here!!

```ts
 <NavigationPrompt
  when={(currentLocation, nextLocation) => { //here!!
      if(!nextLocation) return false;
      setState((prev) => ({...prev, pathname: nextLocation.pathname}));
      return !nextLocation.pathname.startsWith(currentLocation.pathname) && !!formRows.length && locationState.pathname !== nextLocation.pathname
    }
  }
  >
```


Fix error with useCallback

```ts
 const whenCallback = useCallback((currentLocation, nextLocation) => {
      if(!nextLocation) return false;
      setState((prev) => ({...prev, pathname: nextLocation.pathname}));
      return !nextLocation.pathname.startsWith(currentLocation.pathname) && !!formRows.length && locationState.pathname !== nextLocation.pathname
  }, [formRows.length, locationState.pathname]);
  return (
    <div className={classes.pageContainer}>
      <div className={classes.PartList}>
        <AppSettingsFormPartSwitcher />
        <NavigationPrompt when={whenCallback} > // here!
          {({isActive, onConfirm, onCancel}) => (
          <MoveFormComponentDialog
            isActive={isActive}
            onConfirm={onConfirm}
            onCancel={onCancel}
            dialogId={"comfirmStoreFormRows"}
            line={11}
            index={1}
            length={formRows.length}
            locationState={locationState}
          />)}
        </NavigationPrompt>
      </div>
```