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, Dec 20 '20 at 05:58
if you are sure that you will be passing name then remove `?` if not ask me i have a solution — Gayatri Dipali, Dec 20 '20 at 05:59
@MoshFeu I thought the point of passing the `Props` inside `FC` was that you could do that... — Hansel, Dec 20 '20 at 06: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, Dec 20 '20 at 06: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, Dec 20 '20 at 06:18
@GayatriDipali as I told @MoshFeu that will not work. As it forces you to pass down `name` if you remove the `?` even though it has a default value. — Hansel, Dec 20 '20 at 06:23
you could just do this `
Hello, {props?.name}. You are {props?.age} years old.
` — Rogelio, Dec 20 '20 at 06:23

Nicholas Tower · Accepted Answer · 2020-12-20T06:18:20.227

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 '20 at 06:18

answered Dec 20 '20 at 06:03

Nicholas Tower

72,740
7
86
98

it does though... https://github.com/Microsoft/TypeScript/wiki/What%27s-new-in-TypeScript#support-for-defaultprops-in-jsx – Hansel Dec 20 '20 at 06:05
nvm, i see it's for classes – Hansel Dec 20 '20 at 06:06
Yep, classes behave differently. – Nicholas Tower Dec 20 '20 at 06:06
does that mean that the answer here is wrong? https://stackoverflow.com/a/37282264/10040604 – Hansel Dec 20 '20 at 06:08
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. – Nicholas Tower Dec 20 '20 at 06:23
@MustKillBill this would be the correct way with typescript as `defaultProps` is being planned for deprecation – Rogelio Dec 20 '20 at 06:25
Yeah I figured, I had always used this pattern. But the answer on that question threw me off. Thanks guys. – Hansel Dec 20 '20 at 06:27

score 1 · Answer 2 · answered Dec 20 '20 at 06:04

1

What you could do is:

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

answered Dec 20 '20 at 06:04

Gayatri Dipali

1,171
4
16

This works, but defeats the whole purpose of using `defaultProps` in the first place – Spikatrix Oct 17 '21 at 05:32

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

Hello, {props?.name}. You are {props?.age} years old.

2 Answers2