Back to React HubPractice ReactInterview React

Nearby lessons

8 of 44
React - PropsReact - StateReact - DestructuringReact - Handling EventsReact - Conditional Rendering

⚛️ ReactJS – Destructuring Props

📌 What is Destructuring?

What is Destructuring in React?

Destructuring is a feature of JavaScript.

It is used to extract values from arrays or objects and assign them to new variables.

In React, it helps to directly extract props or state variables, making code cleaner and more readable.

In destructuring, it does not change an array or any object. It makes a copy of the desired object or array element by assigning them to new variables.

Later, we can use these new variables in React (class or functional) components.

📌 Without Destructuring

We can access array elements or props manually without destructuring.

React Playground
import React from 'react';

const students = ["Rajesh", "Hitesh", "Yash", "Aadil"];

const App = () => {
  // Access array elements manually
  const std1 = students[0];
  const std2 = students[1];
  const std3 = students[2];
  const std4 = students[3];

  return (
    <div>
      <h2>Without Destructuring</h2>
      <h3>Name: {std1}</h3>
      <h3>Name: {std2}</h3>
      <h3>Name: {std3}</h3>
      <h3>Name: {std4}</h3>
    </div>
  );
}

export default App;
Open on CodeSandboxOpen Sandbox

📌 With Destructuring

We can extract array elements or props easily using destructuring.

React Playground
import React from 'react';

const students = ["Rajesh", "Hitesh", "Yash", "Aadil"];

const App = () => {
  // Extract array elements using destructuring
  const [std1, std2, std3, std4] = students;

  return (
    <div>
      <h2>With Destructuring</h2>
      <h3>Name: {std1}</h3>
      <h3>Name: {std2}</h3>
      <h3>Name: {std3}</h3>
      <h3>Name: {std4}</h3>
    </div>
  );
}

export default App;
Open on CodeSandboxOpen Sandbox

📌 Skipping Array Elements

We can skip array elements by leaving empty spaces between commas during destructuring.

React Playground
import React from 'react';

const students = ["Rajesh", "Hitesh", "Yash", "Aadil"];

const App = () => {
  // Skip the 2nd element
  const [first, , third, fourth] = students;

  return (
    <div>
      <h2>Skipping Array Elements</h2>
      <h3>First: {first}</h3>
      <h3>Third: {third}</h3>
      <h3>Fourth: {fourth}</h3>
    </div>
  );
}

export default App;
Open on CodeSandboxOpen Sandbox

📌 Array Destructuring with Default Values

If the array doesn’t have enough values, we can set default values during destructuring.

React Playground
import React from 'react';

const numbers = [5];

const App = () => {
  // Provide default values
  const [x = 10, y = 20] = numbers;

  return (
    <div>
      <h2>Array Destructuring with Default Values</h2>
      <h3>X: {x}</h3>
      <h3>Y: {y}</h3>
    </div>
  );
}

export default App;
Open on CodeSandboxOpen Sandbox

📌 Object Destructuring with Renaming

We can rename variables while destructuring objects.

React Playground
import React from 'react';

const App = (props) => {
  // Rename while destructuring
  const { name: fullName, age: years } = props;

  return (
    <div>
      <h2>Object Destructuring with Renaming</h2>
      <h3>Full Name: {fullName}</h3>
      <h3>Years: {years}</h3>
    </div>
  )
}

export default App;
Open on CodeSandboxOpen Sandbox

📌 Object Destructuring with Default Values

If props are missing, we can provide default values while destructuring.

React Playground
import React from 'react';

const App = (props) => {
  // Provide default values
  const { name = "Guest", age = 18 } = props;

  return (
    <div>
      <h2>Object Destructuring with Default Values</h2>
      <h3>Name: {name}</h3>
      <h3>Age: {age}</h3>
    </div>
  )
}

export default App;
Open on CodeSandboxOpen Sandbox

📌 Accessing props directly

In this example, we use props directly without destructuring. We access props.name and props.age inside the component.
React Playground
import React from 'react';

const App = (props) => {
  return (
    <div>
      <h1>Name : {props.name}</h1>
      <h1>Age : {props.age}</h1>
    </div>
  )
}

export default App;
Open on CodeSandboxOpen Sandbox

📌 Destructuring inside function body

Here, we first take props and then destructure them inside the function body using let {name, age} = props.
React Playground
import React from 'react';

const App = (props) => {
  let {name, age} = props;
  return (
    <div>
      <h1>Name : {name}</h1>
      <h1>Age : {age}</h1>
    </div>
  )
}

export default App;
Open on CodeSandboxOpen Sandbox

📌 Destructuring in function parameter

Here, we destructure props directly inside the function parameter. So we don’t need to use props.name, just use name and age directly.
React Playground
import React from 'react';

const App = ({name, age}) => {
  return (
    <div>
      <h1>Name : {name}</h1>
      <h1>Age : {age}</h1>
    </div>
  )
}

export default App;
Open on CodeSandboxOpen Sandbox

📌 Wrong destructuring with different names

If we destructure props with different variable names (like a and b instead of name and age), the data will not show because props must match the same key names.
React Playground
import React from 'react';

const App = (props) => {
  let {a, b} = props;
  return (
    <div>
      <h1>Give same name as props otherwise data will not show</h1>
      <h1>Name : {a}</h1>
      <h1>Age : {b}</h1>
    </div>
  )
}

export default App;
Open on CodeSandboxOpen Sandbox

🧩 Advantages of Destructuring

  • It makes developer’s life easy, by assigning their own variables.
  • Improves readability and sustainability of code
  • Reduces amount of code used in an application
  • Trims steps needed to access data properties
  • Provides components with exact data properties
  • Saves time when iterating over arrays of objects

🧠 Test Your Knowledge

3 Questions

Progress: 0 / 3
Keep Going!React - Handling Events