⚛️ ReactJS – Destructuring Props

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.

We can access array elements or props manually without destructuring.

We can extract array elements or props easily using destructuring.

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

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

We can rename variables while destructuring objects.

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

In this example, we use props directly without destructuring. We access props.name and props.age inside the component.

Here, we first take props and then destructure them inside the function body using let {name, age} = props.

Here, we destructure props directly inside the function parameter. So we don’t need to use props.name, just use name and age directly.

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.