Attach a property to a functional component wrapped with React.forwardRef

Question

I have a component wrapped with React.forwardRef and it so happens that it is a compound component as well.

I'm not sure how do I maintain

Form.Item = FormItem;

while the Form component function being wrapped with forwardRef.

const Form = React.forwardRef((props, ref) => { return <form></form>});

Typescript gives me an error (rigthly) saying

Property 'Item' does not exist on type 'ForwardRefExoticComponent>'.ts(2339)

Can you modify Form component? Or is it from a third-party library? — glinda93
– glinda93, Commented Apr 1, 2020 at 10:08
What about this - github.com/DefinitelyTyped/DefinitelyTyped/issues/… ? — Antoan Elenkov
– Antoan Elenkov, Commented Apr 1, 2020 at 10:12

Petros Kyriakou · Accepted Answer · 2021-01-06 15:04:10Z

Just to make it more clear of the solution, as it's on an external site (Credits to original author here, and thank you @Antoan Elenkov)

export interface Props = { ...yourPropsHere; }; export interface CompoundedComponent extends React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>> { yourStaticFunctionOrSomethingLikeThat: () => void; } const Component = React.forwardRef<HTMLInputElement, Props>((props, ref) => ( <input ref={ref} {...props} /> )) as CompoundedComponent; Component.yourStaticFunctionOrSomethingLikeThat = () => {};

There's an even better answer now: github.com/DefinitelyTyped/DefinitelyTyped/issues/…
Lack of reasoning by the author on why it works makes me hesitant to believe its better.
Regardless of "why it works", I would be very surprised if that was unstable/undefined behavior, as it's pretty much just Object.assign().

Alireza Mirian · Accepted Answer · 2022-08-24 10:32:33Z

This solution from the same GH thread seems nicer to me:

const Form = React.forwardRef(function Form(...) { ... }) const FormItem = React.forwardRef(...) const FormNamespace = Object.assign(Form, {Item: FormItem}) export {FormNamespace as Form}

Collectives™ on Stack Overflow

Attach a property to a functional component wrapped with React.forwardRef

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related