React - TypeScript adding undefined to prop even though defaultProps are defined

Question

Why does the following doing the following:

type Props = {
  name?: string
  age: number
}

const Test = FC<Props> = (props) => {
  return (
    <h1>Hello, {props.name}. You are {props.age} years old.</h1>
  )
}

Test.defaultProps = {
  name: "John"
}

Give off the warning that name could be undefined when strict mode is set to true even though name is defined in defaultProps.

Because you're specifying the name can be undefined in Props — Mosh Feu
– Mosh Feu, Commented Dec 20, 2020 at 5:58
if you are sure that you will be passing name then remove ? if not ask me i have a solution — Gayatri Dipali
– Gayatri Dipali, Commented Dec 20, 2020 at 5:59
@MoshFeu I thought the point of passing the Props inside FC was that you could do that... — Hansel
– Hansel, Commented Dec 20, 2020 at 6:00
@GayatriDipali not necessarily. name has a default value. But if you remove the ? it will ask for the name prop every time you use the component, which is invalid, as it has a default property. — Hansel
– Hansel, Commented Dec 20, 2020 at 6:01
Nope. it means that name can be undefined, therefor the code should consider it. You can remove the optional mark (?) because you know that name is never undefined. — Mosh Feu
– Mosh Feu, Commented Dec 20, 2020 at 6:18

Nicholas Tower · Accepted Answer · 2020-12-20 06:18:20Z

4

Typescript does not check defaultProps for function components. If you want a default value, you should use ES6 default values, as in:

type Props = {
  name?: string
  age: number
}

const Test: FC<Props> = ({ name = "John" }) => {

}

edited Dec 20, 2020 at 6:18

answered Dec 20, 2020 at 6:03

Nicholas Tower

87k10 gold badges115 silver badges127 bronze badges

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

7 Comments

Hansel Over a year ago

it does though... github.com/Microsoft/TypeScript/wiki/…

Hansel Over a year ago

nvm, i see it's for classes

Nicholas Tower Over a year ago

Yep, classes behave differently.

Hansel Over a year ago

does that mean that the answer here is wrong? stackoverflow.com/a/37282264/10040604

Nicholas Tower Over a year ago

To my knowledge, the section on function components is wrong: defaultProps on a function component does not change the types. Perhaps there's some compiler flag i'm unaware of that would allow it to work.

|

Gayatri Dipali · Accepted Answer · 2020-12-20 06:04:48Z

1

What you could do is:

{props.name ? props.name : "Jhon"}

answered Dec 20, 2020 at 6:04

Gayatri Dipali

1,2937 silver badges16 bronze badges

1 Comment

Spikatrix Over a year ago

This works, but defeats the whole purpose of using defaultProps in the first place

Collectives™ on Stack Overflow

React - TypeScript adding undefined to prop even though defaultProps are defined

2 Answers 2

7 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related