React functional component static property

Question

I had a class component with another class component as his static property. Now I switched to a function component and I don't know how to keep the static property.

class Panel extends React.Component<Props> {
  public static Fieldset = PanelFieldset;
}

class PanelFieldset extends React.Component<Props> {
  ...
}

class App extends React.Component<Props> {
  public render() {
    return (
      <Panel>
        <Panel.Fieldset>
          ...
        </Panel.Fieldset>
      </Panel>
    )
  }
}

Now, switching to function component:

const Panel: React.FunctionComponent<Props> = (props) => {
  Panel.Fieldset = PanelFieldset;
}

but I get the error: Property 'Fieldset' does not exist on type 'FunctionComponent'.ts(2339)

Any help?

I hope this helps! reactandtypescript.dev/examples/…

AryanJ-NYC
– AryanJ-NYC

2020-01-11 02:39:15 +00:00
Commented Jan 11, 2020 at 2:39 — AryanJ-NYC
– AryanJ-NYC, Commented Jan 11, 2020 at 2:39

Jasperan · Accepted Answer · 2024-05-31 20:25:27Z

36

With implicit typing (Best Solution)

The following shows an approach where you don't have to type your static properties explicitly. I personally prefer this over any other solution, since it is the shortest and most clean way.

const PanelComponent: React.FC<Props> = (props) => {
 ...
}

export const Panel = Object.assign(PanelComponent, { PanelFieldset })

With explicit typing (Previous Solution)

If you want to type your static properties explicitly, extending @Andrew's answer, using typeof PanelFieldset should be more convenient to type your component.

type IPanel<P> = React.FunctionComponent<P> & {
  Fieldset: typeof PanelFieldset; // add this
}

const Panel: IPanel<Props> = (props) => {
}

Panel.Fieldset = PanelFieldset;

Source: https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Dropdown.tsx#L230-L237

edited May 31, 2024 at 20:25

Jasperan

4,9457 gold badges33 silver badges69 bronze badges

answered Feb 1, 2020 at 21:53

oemera

3,4933 gold badges23 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

James · Accepted Answer · 2019-08-29 15:03:23Z

21

For static properties on a function you declare them on the function itself i.e.

function Panel() {
}
// static props
Panel.Fieldset = PanelFieldset

A similar approach can be seen for setting propTypes on a component. I assume in TS that would look like:

Panel.Fieldset: React.Component<Props> = PanelFieldset

edited Aug 29, 2019 at 15:03

answered Aug 29, 2019 at 14:56

James

82.4k19 gold badges172 silver badges245 bronze badges

6 Comments

James Over a year ago

@JohnnyZabala I misread, I thought they had Panel.Fieldset: PanelFieldset, d'oh

Johnny Zabala Over a year ago

Oh I see! Yeah, you are right in that case, it wouldn't be valid js.

Simone Conti Over a year ago

Thank you but I'm getting the same error: Property 'Add' does not exist on type FunctionComponent

James Over a year ago

@SimoneConti that doesn't seem related? There is on Add property in the example given.

Andrew Over a year ago

It is related. React.Component<Props> can only define keys inside props. Fieldset is a propery on the function itself, not inside props

|

Andrew · Accepted Answer · 2019-08-29 19:02:20Z

10

React.FunctionComponent is scoped purely within the key props, which you discovered does not work when you want to add a property that is not in the props key. In order to properly type it, you need to make your own type and extend it.

After that, assign it outside of the function

type IPanel<P> = React.FunctionComponent<P> & {
  Fieldset: any //whatever type it actually is
}

const Panel: IPanel<Props> = (props) => {
}

Panel.Fieldset = PanelFieldset;

edited Aug 29, 2019 at 19:02

answered Aug 29, 2019 at 16:27

Andrew

7,5855 gold badges28 silver badges35 bronze badges

2 Comments

Simone Conti Over a year ago

Thank you, I ended up with: const Panel: React.FunctionComponent<Props> & { PanelFieldset: React.FunctionComponent<PanelFieldsetProps> }

Andrew Over a year ago

Quite a bit to put as an inline type, but I'm not going to tell you how to write your code ;). Glad it worked out, and good luck with the rest of your project

Johnny Zabala · Accepted Answer · 2019-08-29 15:28:12Z

5

Typescript compiler is telling you that you are using a property that is not defined in the function. Move Panel.Fieldset = PanelFieldset; outside de function.

// Bad
function A() {
  A.B = 'hello'
}

// Good
function A() {}
A.B = "Here we go."

edited Aug 29, 2019 at 15:28

answered Aug 29, 2019 at 14:56

Johnny Zabala

2,4811 gold badge16 silver badges16 bronze badges

Collectives™ on Stack Overflow

React functional component static property

4 Answers 4

Comments

6 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

6 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related