TypeError: Cannot destructure property 'name' of 'undefined' as it is undefined

Question

In a new reactjs project I have this basic code:

type User = {
  name: ?string,
  age: ?string,
};
const getUserName = ({name,age,}: User): ?string => name;

giving me this error:

TypeError: Cannot destructure property 'name' of 'undefined' as it is undefined.

What does this mean?

Am I not defining both User and its name just above?! Why is it saying I'm not?

Intention is:

const someUser = { name: "John", age: "12" }
const userName = getUserName(someUser)
console.log(userName)// should output 'John'

You need to pass an object of shape {name, age} in getUserName currently you are not passing any params — Yash Joshi
– Yash Joshi, Commented Jul 25, 2020 at 12:13
thank you, just fyi I'm a backend engineer so all this react kung-fu is new to me :), i thought i was passing an arg here '({name,age,}: User)' what's that then? — jakstack
– jakstack, Commented Jul 25, 2020 at 12:15
@jakstack you're declaring a function, the stuff between the () is the arguments for your arrow function. Here you're destructuring the arguments of an input object, which has the type of User. — Nick Parsons
– Nick Parsons, Commented Jul 25, 2020 at 12:24
Here you are defining the parameters the function accepts in your case it is an object of the shape {name, age} and you are destructuring that object. You want to use this function as getUserName({ name: "John", age: 12 }) — Yash Joshi
– Yash Joshi, Commented Jul 25, 2020 at 12:25
Is this TypeScript, or Flow? Are you getting a runtime error or a compile time type error? — Bergi
– Bergi, Commented Jul 25, 2020 at 12:52

jmoerdyk · Accepted Answer · 2022-12-01 21:14:02Z

2

Add flow:

npm install --save flow-bin

or

yarn add flow-bin.

edited Dec 1, 2022 at 21:14

jmoerdyk

5,5468 gold badges43 silver badges58 bronze badges

answered Dec 1, 2022 at 20:25

Luiz Alencastro

463 bronze badges

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

1 Comment

Ingo Steinke Over a year ago

Please add why this solves the problem.

jakstack · Accepted Answer · 2020-07-25 13:14:47Z

0

Thank you everyone for the good help! It turned out to be missing flow once added here it all worked fine

finale version of the working code is:

type User = {
  name: ?string,
  age: ?string,
};
const getUserName = ({name,age,}: User): ?string => name;

const someUser = { name: "John", age: "12" }
const userName = getUserName(someUser)
console.log(userName)// should output 'John'

answered Jul 25, 2020 at 13:14

jakstack

2,2053 gold badges22 silver badges40 bronze badges

Collectives™ on Stack Overflow

TypeError: Cannot destructure property 'name' of 'undefined' as it is undefined

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related