Default props not working in functional component #31247

AzureMarker · 2019-05-04T03:29:50Z

TypeScript Version: 3.4.5

Search Terms:
react default props defaultProps functional component stateless

Code

import React from "react";

interface Props {
  name: string;
  optional: string;
}

const Component = ({ name, optional = "default" }: Props) => (
  <p>{name + " " + optional}</p>
);

const Test = () => <Component name="test" />;

Expected behavior:
According to the TypeScript 3.0 release notes, the optional prop should not be required in Test as it has been defined with a default using the ES2015 default initializers feature in Component.

Actual behavior:
The following compile error is thrown:

Property 'optional' is missing in type '{ name: string; }' but required in type 'Props'.

Playground Link:
Link
It doesn't look like the playground supports TSX.

Related Issues:
#27425

The text was updated successfully, but these errors were encountered:

ilogico · 2019-05-04T11:11:08Z

The documentation may not be clear on this, but you have to mark the property as optional in your Props interface:

interface Props {
    name: string;
    optional?: string;
}

AzureMarker · 2019-05-04T18:42:19Z

That doesn't seem to match what the release notes say:

export interface Props {
    name: string;
}

// ...

function Greet({ name = "world" }: Props) {
    return <div>Hello {name.toUpperCase()}!</div>;
}

AzureMarker · 2019-05-05T20:46:01Z

Making the prop optional also means that when you access the props outside of the component (in a test), the type system does not guarantee that the prop exists even though it will always exist.

Example:

const wrapper = shallow(<Test/>);

// optional is string | undefined instead of string
const optional = wrapper
        .find(Component)
        .props()
        .optional;

If optional was a function, you would have to check it exists before you execute it. An example is if you provide a default onClick prop which just calls preventDefault.

tbassetto · 2019-05-07T07:14:16Z

With TypeScript 3.1 or above you should be able to write:

export interface Props {
    name: string;
}

function Greet(props: Props) {
    return <div>Hello {props.name.toUpperCase()}!</div>;
}
Greet.defaultProps = {
  name: "world",
} as Partial<Props>; // Good practice, without it you could use a number as default prop and TypeScript wouldn't complain…

const component = <Greet />; // no errors

AzureMarker · 2019-05-09T03:01:24Z

Is it a bug that using the default initializer feature does not work for default props? It seems like a regression given that the example given in the release notes does not work on the latest TypeScript version.

G-Rath · 2019-05-13T04:35:50Z

@tbassetto The problem with that is that TS doesn't force you to actually provide a default value:

import React from 'react';

interface Props {
  myProp: string;
}

const Comp = (props: Props) => {
  return (
    <div>
      {props.myProp.toUpperCase()}
    </div>
  );
};

Comp.defaultProps = {

} as Pick<Props, 'myProp'>;

const comp = <Comp />;

The other annoying thing is the fact that you have to do this in the first place: If I type Comp as React.FC<Props>, then defaultProps is typed nicely, but other problems arise.

All in all, TypeScripts JSX/React support right now seems to be in a weird not-quite-perfect" state, but running as if everything is fine (at least in my eyes - Mainly, I can't seem to find any solid notes on what currently is the "Official" way to do stateless React components in a type safe manner for 3.4.5).

8000

tomspeak · 2019-06-14T13:50:48Z

Although I see everyone referencing work arounds, I am unable to get any of them to work.

I am on version 3.3.3

export interface Props {
  shouldTruncateContent: boolean;
}

const Alert: React.FunctionComponent<Props> = ({
  children,
  shouldTruncateContent = false
}) => {
  return (
        <S.Content shouldTruncateContent={shouldTruncateContent} size="fill">
          {children}
        </S.Content>
  );
};

Alert.defaultProps = {
  shouldTruncateContent: false
} as Pick<Props, 'shouldTruncateContent'>;

export default Alert;

Does anyone have any insight into why this still throws the error

TS2741: Property 'shouldTruncateContent' is missing in type '{ children: string; }' but required in type 'Props'.

I have tried all the fixes proposed in #27425 and #519 too.

dragomirtitian · 2019-06-14T14:01:34Z

@tomspeak Either my workaround or @Hotell's woraround (although this one makes all props optional). Tested on 3.5 with your sample code.

jamesBennett · 2020-02-13T20:18:12Z

Although I see everyone referencing work arounds, I am unable to get any of them to work.

I am on version 3.3.3
export interface Props {
  shouldTruncateContent: boolean;
}

const Alert: React.FunctionComponent<Props> = ({
  children,
  shouldTruncateContent = false
}) => {
  return (
        <S.Content shouldTruncateContent={shouldTruncateContent} size="fill">
          {children}
        </S.Content>
  );
};

Alert.defaultProps = {
  shouldTruncateContent: false
} as Pick<Props, 'shouldTruncateContent'>;

export default Alert;
Does anyone have any insight into why this still throws the error

TS2741: Property 'shouldTruncateContent' is missing in type '{ children: string; }' but required in type 'Props'.

I have tried all the fixes proposed in #27425 and #519 too.

You just need to make shouldTruncateContent: boolean; optional shouldTruncateContent?: boolean;

ralexhassle · 2020-05-26T15:52:55Z

The documentation may not be clear on this, but you have to mark the property as optional in your Props interface:
interface Props {
    name: string;
    optional?: string;
}

I am using this optional type everywhere. Why the down vote ? Could someone explain ?

ilogico · 2020-05-27T16:29:22Z

@ralexhassle, I can't explain the down votes, but I can explain that is certainly a correct way of typing a component's optional property.
You might prefer using defaultProps, which the example of the question isn't using, but as far as I'm concerned, marking optional properties as optional is probably perfectly fine...

AzureMarker · 2020-05-27T16:37:26Z

The purpose of the issue is that the props are not optional, but have a default value (therefore can be eluded when using the component). If you mark the prop optional with ? then TS assumes it could be undefined and forces you to handle that case. However, it will never be undefined because there is a default value. The downvotes are because the commentator did not seem to understand the issue and proposed something that contradicted the 3.0 release notes.

flo-sch · 2020-10-08T14:36:55Z

@RyanCavanaugh why has the bot closed this issue?

Perhaps I missed it but I do not see an actual answer, despite lot of workarounds?

PS: using TypeScript v4

lakhmeranikita · 2020-11-06T16:35:53Z

You can do it in this way, here properties in Props are the optional parameter and further used in the component.

interface Props {
  children: ReactNode;
  properties?: Record<string, unknown>;
}

const defaultProps: Props = {
  children: '',
  properties: {
    marginTop: 32,
    marginLeft: 0,
    marginBottom: 8,
    marginRight: 0,
  },
};

const RadioListLabel: React.FC<Props> = ({
  children,
  properties = defaultProps.properties,
}) => (
  <View
    margin={[
properties ? properties.marginTop : 0
        properties ? properties.marginLeft : 0
        properties ? properties.marginBottom : 0
        properties ? properties.marginRight : 0
      ]}
  >
    <Text size="m" variant="heading2" lineHeight="body">
      {children}
    </Text>
  </View>
  )

AzureMarker · 2020-11-06T21:07:48Z

@lakhmeranikita The purpose of this issue is to avoid marking a prop type as optional.

harjis · 2020-12-01T11:34:14Z

I was unable to get function default arguments or other proposals to type check properly. The only workable solution I was able to find is this:

import React from "react";

type DefaultProps = { optionalProp: number };
type Props = {
  requiredProp: "some_string" | "other_string";
} & DefaultProps;

export const BaseComponent = (props: Props) => {
  const { requiredProp, optionalProp } = props;
  return (
    <div>
      {requiredProp} {optionalProp}
    </div>
  );
};

BaseComponent.defaultProps = {
  optionalProp: 0,
} as Partial<DefaultProps>;

const comp = <BaseComponent requiredProp="some_string" />;

the-kenneth · 2021-02-03T13:28:19Z

Any reason why this was closed? Still an issue on 4.1

lorenzopicoli · 2021-02-03T14:33:52Z

@the-kenneth what was causing my issue was that I was typing my variable as React.FunctionalComponent.

export interface ButtonProps
  extends React.HtmlHTMLAttributes<HTMLButtonElement> {
  size: ButtonSize;
}

Button.defaultProps = {
  size: ButtonSize.full,
};

const Button: React.FunctionalComponent<ButtonProps> = (props: ButtonProps) => {
  return <StyledButton {...props} />;
};

<Button>bla</Button> => doesn't work. It says it's missing property "size"

Now if I declare button like this:

const Button = (props: ButtonProps) => {
  return <StyledButton {...props} />;
};

it works.

Source: #27425 (comment)

I still think it's a bug (people explain better in the issue above), but it might be something that works for you

mo-alaa · 2022-08-04T13:39:25Z

@AzureMarker two years later, have you found any fix ? because as you said, we should avoid marking a prop type as optional.

AzureMarker · 2022-08-19T16:46:15Z

@mo-alaa I'm not using TypeScript/React in my current projects. I think I just went with the defaultProps approach.

weswigham added the Question An issue which isn't directly actionable in code label May 8, 2019

G-Rath mentioned this issue May 13, 2019

[no-object-literal-type-assertion] Allow for function properties option ("defaultProps") typescript-eslint/typescript-eslint#519

Closed

8000 typescript-bot closed this as completed Jul 13, 2019

svpace mentioned this issue Jan 25, 2020

Revaluate default props behavior in JSX functional components #36433

Open

hank121314 mentioned this issue Jul 9, 2020

[BUG] react/prop-types - false positive when returning null jsx-eslint/eslint-plugin-react#2703

Closed

Unsleeping mentioned this issue Oct 28, 2020

Initial migration messenger on TS iwebexpert/group-corp-2#638

Merged

sinansonmez mentioned this issue Oct 26, 2022

MM-47111 : Migrate "components/emoji_picker/emoji_picker_tabs" to typescript mattermost/mattermost-webapp#11401

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Default props not working in functional component #31247

Default props not working in functional component #31247

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Default props not working in functional component #31247

Default props not working in functional component #31247

Comments

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!