JSX props should not use arrow functions eslint warning

Question

I have two component that one passes some func as prop to another and I am not sure what is the proper way to do this without having to receive an eslint error:

Code:

<Parent>
  const doSmthHandler = useCallback((id: number)=> {
   //do some stuff 
  },[])
  <ComponentB>
     doSmth={()=>doSmthHandler(id)} // Here I get eslint warning: JSX props should not use arrow functions eslint warning
  </ComponentB>
</Parent>

Component B receives doSmth prop as function and has a button such as:

<Button onPress={doSmth}>Do stuff</Button>

I wonder how do I pass some argument into the cuntion passed as cb prop into another component that I dont get eslint errors!

Have you tried the React hook `useCallback`? You can find documentation for it [here](https://reactjs.org/docs/hooks-reference.html#usecallback) — sandmann, Feb 10 '21 at 15:37
I actually have it already under callBack() but the warning still shows! — Lulzim Fazlija, Feb 10 '21 at 15:39
dont see any example from above link how do you pass arg to the func without having to use inline arrow fn — Lulzim Fazlija, Feb 10 '21 at 15:46
@isnihalsi the problem is that you're passing a callback directly as a property. You should declare it before passing it down to the component to avoid the ESLint warning. — sandmann, Feb 10 '21 at 15:48

sandmann · Accepted Answer · 2021-02-10T15:51:39.253

2

The problem with your code is that you're passing a callback as a property directly. You could declare it as a wrapper using useCallback before passing it down to the component, like so:

const doSmthHandlerWrapper = useCallback(
    () => doSmthHandler(id),
    [id]
)

<ComponentB>
    doSmth={doSmthHandlerWrapper}
</ComponentB>

edited Feb 10 '21 at 15:51

answered Feb 10 '21 at 15:46

sandmann

363
2
13

how do you pass `id` inside doSmthHandlerWrapper? – Lulzim Fazlija Feb 10 '21 at 15:50
Have you declared `id` on your component (`Parent` in your example code)? If so, it should be visible to the function via closure when the it's called. – sandmann Feb 10 '21 at 15:54
no, actually this is the key point here, I would like to pass an arg to doSmthHandlerWrapper() for ex doSmthHandlerWrapper(1) – Lulzim Fazlija Feb 10 '21 at 15:57
Can you provide a snippet with a broader version of your code, showing what you're tring to do? – sandmann Feb 10 '21 at 16:02
it seems like I can simply do like – Lulzim Fazlija Feb 10 '21 at 16:09
you can, but this function will be called as soon as the component is rendered, therefore its return value will be passed as `doSmith`, not the function itself. – sandmann Feb 10 '21 at 16:12
yeah so thats why also we wrap fn into useCallback fn so it doesnt createthe function everytime for each render! – Lulzim Fazlija Feb 10 '21 at 16:13
but this makes an issue to me if the function will be called as soon as the component render, I dont want to be called on render but I would want it to be called when needed, like other cmp triggers! – Lulzim Fazlija Feb 10 '21 at 16:17
that is why I was asking for a code snippet. If I could take a look at what you're tring to do, I could provide a more precise answer. – sandmann Feb 10 '21 at 16:19

JSX props should not use arrow functions eslint warning

1 Answers1