const {children} = this.props vs const children = this.props.children

Question

I'm new to react and I'm trying to understand how the general syntax works, not sure if this is an appropriate place to ask this. The following is my code for a simple title component.

export default class Title extends Component { 
    render () {
        const {children} = this.props;

        return (
          <View style={styles.header}>
            <Text style={styles.title}>{children}</Text>
          </View>
        )
    }
}

is this

const {children} = this.props;

is equivalent to

const children = this.props.children;

If so, which is the correct form to use? Just trying to get a better understanding how react works, in addition, would the following try to get the children of the children of the props?

const {children} = this.props.children

Either of the two ways are valid, it is your preference of which to use. Your last example will not get children, unless children has a property children — Get Off My Lawn, Jul 25 '18 at 20:24
It's the same, you only save one variable assignment in `const { children }` if children is not defined — Rodrigo Mata, Jul 25 '18 at 20:25
This is nothing specific to React. Its a new feature (Object Destructuring) of JS. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment — intekhab, Jul 25 '18 at 20:26
It is important to understand that it is not React/JSX syntax, it's purely Javascript syntax. — mpm, Jul 25 '18 at 20:28
Possible duplicate of [What does curly brackets in the \`var { ... } = ...\` statements do?](https://stackoverflow.com/questions/15290981/what-does-curly-brackets-in-the-var-statements-do) — Aramil Rey, Jul 25 '18 at 20:32

score 3 · Accepted Answer · answered Jul 25 '18 at 20:34

This feature is called object destructuring and allows you to take properties of an object and store them conveniently into a variable. For example:

const obj = {
 prop1: 1,
 prop2: 2
}

const {prop1, prop2} = obj;

console.log(prop1, prop2);

In your example the children property is pulled of the this.props object and put into a const which is named children.

const {children} = this.props;

is equivalent to

const children = this.props.children;

However the object destructuring syntax is more compact and could more easily extended for example if props had a prop called foo:

const {children, foo} = this.props;

Now we have a variable of both children and foo.

WebD · Answer 2 · 2018-07-25T20:31:50.860

1

It's called Object Destructuring. It is not specific to React

You can extract a property of an Object like so.

This will gives you undefined, because children doesn't contains a children property.

const {children} = this.props.children

But, both methods are good.

Read this for more informations: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

edited Jul 25 '18 at 20:31

answered Jul 25 '18 at 20:26

WebD

615
1
4
15

score -1 · Answer 3 · answered Jul 25 '18 at 21:58

When you have an object with just one property such as

const obj = {
  propA: 5
}

Ther is no big differnce between

const propA = obj.propA and const { propA } = obj

However, with object which have multiple properties, object destructuring becomes benefitial (we write less sode):

const obj = {
  propA: 5,
  propbB: true,
  propC: 'some string'
}

// less code (and cleaner)
const { propA, propB, propC } = obj

// otherwise
const propA = obj.propA
const propB = obj.propB
const propC = obj.propC

const {children} = this.props vs const children = this.props.children

3 Answers3