Applying Basic Destructuring in React

Manon Sainton
Dec 30, 2020 · 4 min read
Image for post
Image for post

Welcome! If you’ve worked in React before, you may have heard of the term destructuring. Destructuring is an ES6 convention that allows us developers to extract values from data in an array or properties from an object. This is useful, because we can choose which properties we need and assign them in a variable. Benefits of destructuring include:

  • Syntactic sugar: It just looks aesthetically pleasing!
  • Cleaner and concise code : You don’t have to repeat “this.state” or “this.props” over and over again.

Destructuring doesn’t change the object or array you are using. It simplifies code by consolidating parts of the data we want to use making it easier to read when working with props, state, and data flow between components.

Using Destructuring

It is important to note that destructuring is used differently within a function based component or a class based component. Let’s look at each way to do it.

To show how destructuring works, I created a tiny app with Read functionality using an API from the USDA and extracted some data to display to the DOM:

Image for post
Image for post

In the image above, there are three descriptions of candy bars I accessed from an object — 100 Grand Bar, 3 Musketeers Bar, and 3 Musketeers Truffle Crisp Bar. A link to the app can be found here!

Destructuring in a Class Component

Before breaking down the code, it looked like this:

Image for post
Image for post

You can see that we have “somethingClicked” in state set to false on lines 5–7. In the return section, there is a ternary statement using state to decide when to return a <div> with either a className of “yellow” or “cyan”. In each of these divs, there is an <h2> tag with props of a food description. Let’s destruct the state first. To do this we have to:

  1. Start our variable with “const”
  2. Use curly brackets “{}” to hold the data we’re extracting
  3. Make the variable equal to “this.state”
  4. Remove “this.state” from where “somethingClicked” is being called

Now lets see what the code looks like now:

Image for post
Image for post

By looking at the image above, on line 23 inside the render section:

  1. We started our variable with const
  2. We put the property we extracted from state, “somethingClicked”, inside of curly braces
  3. We made const {somethingClicked} equal to “this.state”
  4. On line 25, we removed “this.state” right before somethingClicked

Bravo! Now we have to tackle props. In an h2 tag, props are being passed down from a component with a property of “description” inside curly braces: <h2>{this.props.food.description}</h2>. We will follow the same 4 steps above for props:

Image for post
Image for post

On line 24 in the render section, we created a variable taking in two extracted properties, “description” and “ingredients”, and equated them to “this.props.food” (because the object had nested data, “food” is included at the end of “this.props”. In many cases it may be only “this.props” required). Then in our h2 and h3 tags, we removed “this.props.food” before “description” and “ingredients”. We mentioned this.state and this.props.food once on lines 23–24, and never had to mention it again.

Destructuring in Function Components

Function components use a similar convention when destructuring. Remember, in function components there is no state and we don’t need to use the term this. Here is how the function component looks with props before destructuring:

Image for post
Image for post

To destruct props, we’ll set up our variable before the return on line 5 and remove “props.food” right before “fdcId” on line 7:

Image for post
Image for post

And there you have it! Destructuring done in a function component! Now looking at the app, we can see 3 ID numbers underneath the bar descriptions:

Image for post
Image for post

Takeaway

Destructuring in React is very helpful in a number of ways. Remember that:

  • It provides syntactic sugar
  • Keeps our code concise and DRY
  • Is used differently between function and class components
  • Keeps us developers current with ES6 conventions

Thanks for reading! I hope these basic destructuring techniques were helpful! If so, get more similar content by subscribing to our YouTube channel!

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store