All language subtitles for 006 Array Destructuring_en

Now, let me get rid of that dummy title output and let's work on the overall syntax we're using here

thus far, we're storing this array, we're getting back in the input state, and we can absolutely

do that.

But it means that we have to use input state zero if we want to get the values and input, said one.

If we want to get the function to update the values, of course we can do that.

But it's a bit of hard to understand.

Syntax, for example, that this is a function is not immediately obvious.

We can't use a modern JavaScript syntax to make that easier to understand.

We can use a feature called Array de Structuring.

How does it work?

It allows you to pull elements out of an array and store them in separate variables.

So here where you know that you get an array with exactly two elements, you can add square brackets

on the left side of the equals sign.

So by adding them on the left side, you're not using them to create a new array or anything like that.

That would be the case if you use them on the right side.

But instead, this now is a JavaScript syntax that allows you to pull elements out of that array and

store them in variables.

And you add as many variables here, variable names of your choice here between the square brackets

on the left side as you have elements in the array.

So here we have all these exactly two elements.

So we can add two values here with any names you want.

The first element will be our data.

So here that could be input state and the second will be a function to update that data.

Typically you named as set input state or a set, whatever you name your data because you're well,

setting this to a new value.

You are not merging it.

You're not updating it, you're overriding it.

So you're setting some new data.

So now we're using a restructuring and our input state will be our data and that will be the function

to update the data.

That's way easier to use.

Now we can use input state here without the zero to work with our data and we use set input state instead

of input state one to update our data.

And I think that's much easier to read and to understand that it was before.

To be honest, if we save that, it works just as before.

But now we have a syntax that's way easier to understand.

A side note, of course, this button still doesn't do anything because we haven't hooked up any logic,

but we'll do that step by step.

So this is the syntax will actually use the syntax you see in the official docs you'll see for the rest

of this course and the syntax, which is much better to use when working with the use state hook.