ReactJS – How To Use Destructuring In React

In the article, we will give you an example of destructuring in react that is the same work in javascript but you need to use es6 + babel library. The destructure means pull the array data into respective variables. It is similar to the spread operator but not.

The below example covers destructuring of array and object. you can run array destructure on js-bin tools but it doesn’t support object destructure methods. Let’s have a look at the below example for both:

Array Destructuring

In this example, we will put three-length array data into the respective variable and print it.

const num = [1,3,6];
[num1, ,num3] = num;
console.log(num1); // 1
console.log(num3); // 6

Here num copy into a variable for 1st and 3rd, second we put blank so, it will give 1st and 3rd data on the console.

Object Destructuring

{nm} = {name:'blogindices', age:'3'}
console.log(nm); //blogindices
console.log(age); //undefind 

Hope with both example you get an idea about the destructure for array and object. In the upcoming react tutorial, we will give you a complete idea about these react destructure usages so, please connect with us to get more reactjs articles.

Stay in touch. Ask Questions.
Lean on us for help, strategies and expertise.

Leave a Reply

Your email address will not be published. Required fields are marked *