When declaring a function component with ReactJS

Question

So I have seen people using different ways to declare a function. However, I saw one way that I did not quite understand. The sample code is shown as below:

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

const someFunction = ({
    name,
    age
}: Props) => {
   return (
    // Do something here
   )
}

So I know this code here is first creating a Props object with name and age. The part that I do not get is the part where it shows ({name, age}: Props). I am guessing it is a parameter mapping the state to the props, but I am not sure. Can anyone explain this please?

Does this answer your question? What is destructuring assignment and its uses? — Emile Bergeron
– Emile Bergeron, Commented Aug 20, 2020 at 0:41

Elfayer · Accepted Answer · 2020-08-20 00:45:18Z

3

It is called Destructuring Assignment. It is an ES6 syntax.

It exists for arrays and objects.

It is basically a way to extract part of an array/object.

When doing { name, age } = props, you're extracting name and age from the usually called props object.

Using destructuring:

const someFunction = ({
    name,
    age
}: Props) => {
  console.log(name, age)
}

Without destructuring:

const someFunction = (props: Props) => {
  const name = props.name
  const age = props.age

  console.log(name, age)  
}

edited Aug 20, 2020 at 0:45

answered Aug 20, 2020 at 0:27

Elfayer

4,57010 gold badges50 silver badges78 bronze badges

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

3 Comments

X_C95 Over a year ago

So if I have something like ({"Andy", 10}: Props) it is going to pass it to name = "Andy", age = 10?

Elfayer Over a year ago

I edited the examples. It is not a way to assign values, it is only a shortcut, to avoid having to repeat yourself as in const name = props.name. You can simply say: const { name } = props.

X_C95 Over a year ago

That made sense now. Thanks a lot

Collectives™ on Stack Overflow

When declaring a function component with ReactJS

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