Are there better ways to implement TanStack Form?

[amin-ruhul]

I'm using TanStack Form with withForm, but I'm encountering a lint error:

Error: React Hook "useState" is called in function "render" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use". react-hooks/rules-of-hooks

Initially, I had something like this:

const SkuFormTabs = withForm({
  ...itemDescriptionOptions,
  render: ({ form }) => {
    const [selectedTab, setSelectedTab] = useState('itemDescription');
    // ...
  },
});

To fix the lint issue without disabling the rule, I moved the render logic to a new component:

type SkuFormContentProps = {
  form: ReturnType<typeof useAppForm>; // not working, 
};

function SkuFormContent({ form }: SkuFormContentProps) {
  const [selectedTab, setSelectedTab] = useState('itemDescription');
  // ...
}

const SkuFormTabs = withForm({
  ...itemDescriptionOptions,
  render: ({ form }) => <SkuFormContent form={form} />  // form need 10 more argument 
});

Now How should I properly type the SkuFormContent props?

@Balastrong

[oscar-b]

const SkuFormTabs = withForm({
  ...itemDescriptionOptions,
  render: function Render({ form }) {
    const [selectedTab, setSelectedTab] = useState('itemDescription');
    // ...
  },
});

[brunocontreras]

This should ideally be covered in the documentation.

[LeCarbonator]

@brunocontreras It already is.

[brunocontreras]

You're right, sorry about that