Default props in TypeScript React component

Question

I recently found a way to set default props on React components, like this:

type Props = {
  children: any,
  color?: keyof typeof textColors,
};

const GTitle: React.FC<Props> = ({ children, color }) => (
  <Title color={textColors[color]}>
    {children}
  </Title>
);

GTitle.defaultProps = {
  color: 'primary',
};

The problem is that even if I define that there is a default property, the TypeScript keeps accusing the possibility of having an undefined value, as in the example below:

Use actual default arguments, TypeScript understands them just fine: = ({ children, color = "primary" }) => — jonrsharpe
– jonrsharpe, Commented Aug 15, 2022 at 12:55
check this similar question Type 'Key' cannot be used to index type 'Object' could be related to your issue. good luck ;) — omar
– omar, Commented Aug 15, 2022 at 13:00
I think that it would be good if someone turns the comment into an answer (maybe @TchiteuMargiela?). That way this question can be marked as solved. — David Scholz
– David Scholz, Commented Aug 15, 2022 at 17:16

Tchiteu Abloh · Accepted Answer · 2022-08-16 11:14:33Z

2

I managed to solve it using default arguments. TypeScript understands them just fine:

type GTitleProps = {
  children: any,
  color?: keyof typeof textColors,
};

const GTitle: React.FC<GTitleProps> = ({
  children,
  color = 'primary',
}) => (
  <Title color={textColors[color]}>
    {children}
  </Title>
);

export default GTitle;

Addendum: defaultProps will be deprecated for function components.

answered Aug 16, 2022 at 11:14

Tchiteu Abloh

5641 gold badge8 silver badges17 bronze badges

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

3 Comments

SalahAdDin Over a year ago

Typescript understands them but not eslint.

Tchiteu Abloh Over a year ago

@SalahAdDin With default rules? with me, eslint did not point out anything wrong

SalahAdDin Over a year ago

I found the eslint precise rule we need to use for default arguments.

Collectives™ on Stack Overflow

Default props in TypeScript React component

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related