24
October
2016

Using ES6 Destructuring in your React Components

by
Silas Landricombe
,
10
minute read.
Share this article

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.

Amido needs the contact information you provide to us to contact you about our products and services. You may unsubscribe from these communications at any time. For information  please review our privacy policy.
Oops! Something went wrong while submitting the form.

Things you will learn

This post will show you a few ways you can use it inside your React components.

Find out how to mitigate duplicate constant names for larger objects.

How to use destructuring, alongside the ES6 spread syntax in an efficient and reliable way.

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.

Related content

No items found.

Need help plotting a route to the cloud?

We can help you define your digital strategy and turn it into a technical roadmap, achieving momentum to quickly deliver business value, whilst minimising risk.

Ask a question

If you consent to receiving communications from Amido, please subscribe using the checkbox below. If at any point you'd like to unsubscribe, you can do so using the links provided in our newsletters. You can review how your data is handled in our privacy policy.
Thank you, your submission has been received!
Oops! Something went wrong while submitting the form.