Flash cards
Review the key moves
What is the main idea behind React ES6 Destructuring?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___ vehicles = ['mustang', 'f-150', 'expedition'];Put the learning moves in the order that makes the concept easiest to apply.
Destructuring in React
Destructuring is a JavaScript feature that allows you to extract values from objects or arrays into distinct variables. In React, it's commonly used with props, hooks, and state management.
Note
Destructuring makes React code cleaner and more readable by reducing repetitive object and array access.
Destructing Arrays
Here is the old way of assigning array items to a variable:
Example
const vehicles = ['mustang', 'f-150', 'expedition'];
// old way
const car = vehicles[0];
const truck = vehicles[1];
const suv = vehicles[2];
//You can now access each variable separately: document.getElementById('demo').innerHTML = truck;Here is the new way of assigning array items to a variable:
Example
const vehicles = ['mustang', 'f-150', 'expedition'];
const [car, truck, suv] = vehicles;
//You can now access each variable separately: document.getElementById('demo').innerHTML = truck;When destructuring arrays , the order that variables are declared is important.
If we only want the car and suv we can simply leave out the truck but keep the comma:
const vehicles = ['mustang', 'f-150', 'expedition'];
const [car,, suv] = vehicles;Destructuring comes in handy when a function returns an array:
Example
function dateInfo(dat) {
const d = dat.getDate();
const m = dat.getMonth() + 1;
const y = dat.getFullYear();
return [d, m, y];
}
const [date, month, year] = dateInfo(new Date());Destructuring Objects
You can use destructuring to extract the values from an object:
Example
const person = {
firstName: "John", lastName: "Doe", age: 50
};
// Destructuring
let {firstName, lastName, age} = person;
//You can now access each variable separately: document.getElementById("demo").innerHTML = firstName;For objects , the order of the properties does not matter:
Example
const person = {
firstName: "John", lastName: "Doe", age: 50
};
// Destructuring
let {lastName, age, firstName} = person;You can extract only the value(s) you want:
Example
const person = {
firstName: "John", lastName: "Doe", age: 50
};
// Destructuring
let {firstName} = person;For potentially missing properties we can set default values:
Example
const person = {
firstName: "John", lastName: "Doe", age: 50
};
// Destructuring
let {firstName, lastName, age, country = "Norway"} = person;We can also destructure deeply nested objects by referencing the nested object then using a colon and curly braces to again destructure the items needed from the nested object:
Example
const person = {
firstName: "John", lastName: "Doe", age: 50, car: {
brand: 'Ford', model: 'Mustang', }
};
// Destructuring
let {firstName, car: { brand, model }} = person;
let message = `My name is ${firstName}, and I drive a ${brand} ${model}.`;Read more about Destructuring in our JavaScript Tutorial .
Destructuring in React Components
Destructuring is particularly useful in React for working with props, hooks, and API responses. It helps make your code more concise and easier to read.
Props Destructuring
When a component receives props, you can use destructuring to extract the values you need.
Check out the difference between using and not using destructuring:
//Using destructuring: function Greeting({ name, age }) {
return <h1>Hello, {name}! You are {age} years old.</h1>;
}//NOT using destructuring: function Greeting(props) {
return <h1>Hello, {props.name}! You are {props.age} years old.</h1>;
}Using destructuring to extract props
import { createRoot } from 'react-dom/client'
function Greeting({ name, age }) {
return <h1>Hello, {name}! You are {age} years old.</h1>;
}
createRoot(document.getElementById('root')).render( <Greeting name="John" age={25} /> );useState Hook Destructuring
When a component uses the useState hook, we use destructuring to extract the values from it.
Example
Using destructuring to extract values from useState:
import { createRoot, useState } from 'react-dom/client'
function Counter() {
// Destructuring the array returned by useState
const [count, setCount] = useState(0);
return ( <button onClick={() => setCount(count + 1)}> Count: {count}
</button> );
}
createRoot(document.getElementById('root')).render( <Counter /> );