The destructuring assignment syntax was introduced to JavaScript in ES6, it is a simple way of extracting data stored in objects and arrays into variables. This post is not intended to be an in depth look at the destructuring syntax, if that’s what you’re after a quick Google search should give you what you need, instead this post is about a few ways you can use it inside your React components.

Let’s start with the basic syntax

‍

Here we are destructuring the component `props` object into its individual variables:

// Given our props object looks like this:

// { foo: ‘foo’, bar: ‘bar’ }

const{

foo,

bar

} = this.props;

‍

‍

That’s it, we have now extracted the two properties inside the props object and can now use the `foo` and `bar`variables wherever needed. This may seem like an overly complicated way of accessing our variables when we could just use `this.props.foo` but, remember, this is just a simple example. It’s the more complicated use cases where destructuring comes into its own.

Let’s look at another scenario, this time using further deconstruction:

‍

 // Given our props object looks like this:

// { foo: ‘foo’, bar: { baz: ‘baz’ } }

const {

foo,

bar: {

baz

}

} = this.props;

This will result in two constants, `foo` and `baz`, with values corresponding to their values inside the props objects. In this example `bar` will not be available as a constant as we have only deconstructed its child property.

‍

As you begin deconstructing larger objects, and delving deeper into the object structure you’ll inevitably start hitting issues with duplicate constant names. The destructuring syntax has a way to mitigate this problem though – you can reassign constant names on the fly. For example:

 // Given our props object looks like this:

‍

// { foo: ‘foo’, bar: { baz: ‘baz’ }, baz: ‘baz’ }

const {

foo,

bar: {

baz

},

baz: baz2

} = this.props;

‍

This will reassign the value of the first level `baz` property to a new constant called `baz2`. Be careful to get the variable name and reassignment the right way round though – at first glance, if you compare our destructured object with our original object, the example above may seem incorrect but this will output three constants named `foo`, `baz` and `baz2`.

Finally let’s take a look at an example in which destructuring really starts to reveal its potential in React development

Maybe you’re building a reusable component library, you want some components that output standard HTML elements with some logic defined by props. For example:

function LinkComponent(props) {

const {

children,

disabled

} = this.props;

const statusClass = disabled ? ‘disabled’ : ‘active’;

return (

<a className={ statusClass }>

{ children}

</a>

);

}

‍

Now as this is just outputting a link you’re probably going to have some standard props, `href` for example, or `onClick`, or `target` etc. You could pass these props down explicitly by taking them into your component and passing them on down to the link element, but this is a rather tedious way of doing it. It also means you need to identify all possible props that can be passed to the particular element you’re outputting.

Fortunately, by using destructuring, alongside another new operator, the ES6 spread syntax, you can do this in a much more efficient and reliable way. So with the same component as before:

‍

 function LinkComponent(props) {

const {

children,

disabled,

…other

} = this.props;

const statusClass = disabled ? ‘disabled’ : ‘active’;

return (

<a className={ statusClass } { …other }>

{ children}

</a>

);

}

‍

By adding ‘…other’ to our deconstructed object we extract any other properties not named explicitly into a new object called, in this case, `other`. We can then perform any operations required inside our component using the props we have defined and pass any other properties, with our own properties handily removed, down into our exported element. In this way Devs using our component can add any properties they might need to apply to, in this case, an anchor element, and our library component doesn’t need to worry about what they may be.

In our example of a component library it is an excellent practice to use this method in any component that outputs a standard HTML element in order to give Devs flexibility. And remember, any props you don’t want to be passed down to the element, or that you want to manipulate first, you can simply extract using destructuring.

‍