extended-salmon

Eslint error - Do not pass children as props. Instead, nest children between the opening and closing

I'm following the instructions to create a basic react-form but this eslint rule is bothering me. Any ideas?

7 Replies

extended-salmonOP•13mo ago

It seems I should turn off this rule

  rules: {
    'react/no-children-prop': 'off',
  },

  rules: {
    'react/no-children-prop': 'off',
  },

Is this ok?

metropolitan-bronze•13mo ago

There's an allowFunctions

 option you can set to true.

https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-children-prop.md#allowfunctions
https://github.com/TanStack/form/blob/main/examples/react/simple/.eslintrc.cjs#L7

That said - in the tanstack/form repo the rule is set to

'off'` 😉

xenial-black•13mo ago

Also, you can just use the other syntax if you'd like 🙂

extended-salmonOP•13mo ago

@ksgn thx it worked 🙂 @crutchcorn could you point me to the other syntax? noob here 🙂

xenial-black•13mo ago

<Comp children={() => null}/>

<Comp children={() => null}/>

Is the same as:

<Comp>{() => null}</Comp>

<Comp>{() => null}</Comp>

metropolitan-bronze•13mo ago

For Biome users I opened a discussion to add the allowFunctions option as well - https://github.com/biomejs/biome/discussions/3698 Any reason why Tanstack Forms is using the children-Prop instead of "actual children"? The eslint rule sounds more like an opinion then an explanation why one is better then the other…

xenial-black•13mo ago

Just more shortform preference for us. It's a pretty minor change that doesn't impact speed or anything else

Gaming

Programming

Eslint error - Do not pass children as props. Instead, nest children between the opening and closing

Did you find this page helpful?