All language subtitles for 041 useState - Array Example.en_US

So that was fun.

Now let's take a look at a more interesting example where our default value, our stock value will be

all right.

And essentially we'll be able to add the items, will be able to remove the items as well as clearly

state value back to an empty area.

And in order to see what we're going to create, I'm going to change, of course, my file.

So I'll use a different path right now.

I'll go for set up then.

I'm looking for use state and then.

All right.

And what you should see in a browser is use state, Aurora, an example.

Now, let's navigate there to that particular file.

So what we're looking for is use state outrageous.

And again, it is located in the.

Now, in this case, though, I'll change this around, and instead of importing as a named export,

I can show that we also have another option where, again, I would need to come up with those two values,

however, I will call them.

So in my case, it is going to be people.

So that is going to be my right and then the function will be called set people.

So these two things I need regardless, and that in order to invoke you state instead of importing,

which is always an option, we can also do something like this where we go with react and then use and

state.

And like I said, this is where it would pass in the before trial.

So, for example, as far as the weather, we could go with empty.

All right.

So these are two ways how we can set up either your airport or you go with the react dot and then you

say, please keep in mind both of them do exactly the same thing.

And that really depends on your preference.

In my case, if I know that, I will use it just once.

Most of the time I'm just lazy and I go with react and then use state power.

If I know that I only walk it quite a few times in my component, then of course I just go with import

and then use use state or whichever book name I pick online.

That just saves me a little bit of typing.

Again, that is up to you.

So for the time being, we just have the empty array, which is somewhat OK, but we remember that we

can pass whatever we would want.

Now, if you'll take a look at the source folder, you'll find data just now in their address.

We have an array and I name this data.

And in here we have an array of objects where we have the idea.

Remember, we needed to do that.

If we're rendering the list, there had to be some kind of unique ID and then we just have the name

and then value.

So John, Peter, Susan and Anna.

So what I would want to do right now in the USA Today, I already imported the data, so I noticed the

path.

I'm looking for data and then I need to go quite a few levels up and then look for that data.

So I leave one folder, second and third, and then eventually I hit the source.

And this is where I'm looking for the data.

Again, this is going to be a relative path.

So now what I would want is to pass in that data array as my default value.

All right.

Awesome.

And then, of course, let's work on our return.

Now, I could go with ReachOut, Fragment or a member.

There is a shortcut where if I go with my angle brackets now, essentially I'm creating my fragment

and I don't have that diffs.

So now what I would want is to iterate over my area.

So I go with people.

Then again, we'll use the map method.

And then for each and every person, I would want to return to something more meaningful.

At first, I guess we can just return a hello and then we can just double check whether everything works,

because of course, that is very, very important.

If I don't have access to each and every person, essentially, if I don't have access to the object,

well, kind of doesn't make sense.

Correct.

So if we cancel log beautifully, what I could say is John, Peter, Susan and I'm going to have four

Hollow's.

So now of course, let's do something a bit more meaningful where what I would want right now is to

structure these two things, the idea.

And then I'm also looking for a name now that is coming from the person.

And then I would want to return a deer.

Now, remember, when we render a list, we need to have this Kiprop and we need to pass in that unique

value.

Now, add a little bit of styling here where I'm going to say ihram.

Again, that has nothing to do with functionality is just for the styling.

And then let's set up a hearing for with a value of name just so we can see the name and then eventually

we will set up our button.

So awesome.

Notice I have my list again.

I used used state status, then I provided some default value, which in my case was done.

All right.

I could have added the empty array, but in my case I already prepared an array in there.

Ajaz it is a array of objects.

Then of course I invoked it.

And then I'm getting to things, I'm getting whatever default value I have, so that is my state value

and then I have the function that controls it.

OK, good.

And then, of course, just like with any other variable, I can just accept and iterating over like

we have covered already before where we're iterating over and then we display for each and every item

that's there and then we're just structuring idea.

And but of course, now let's make it a bit more interesting.

What if I would want to come up with a button that just delete all the items so right next to the people,

I'll set up my button.

I'll add here a class name of B10 and we'll set up our unclick.

Now, if you want, you can set up here a function reference and this is something that we'll do later,

once we would want to remove a specific item.

But for now, I just want to showcase that.

Of course, you can invoke this function directly in here where we're setting up the unclick.

But the Gosia is going to be in this case, since we need to pass in the value, we'll have to set up

a arole function as well.

Remember, that was one of the cases that I showcased before.

So in this case, let me write clear items.

So that is the text in my button and let me showcase that.

If we go set people, of course, we would need to pass in that new value.

Correct.

And if I want to set it up to an empty array, that just means that I will clear out all the items.

Now, the problem is going to be that we right away invoke it, and that's not what we're looking for.

So what we would want is only to invoke it once we click on it.

And remember, the solution was to set up our arrow function first.

So once we do that, then we'll have our button.

And now what this button is doing.

Well, it is calling a set people function.

And remember, the only thing we need to do is to pass in that new value.

So what is the new value in this case?

Well, since I would want to clear all the items I just pass in the empty array, correct phonology.

And of course, everything works.

So now we remove all the items.

Again, that is something you need to remember where, yes, you can call directly this function.

You can set up a handler like we did previously and like we will do here where we would want to remove

a single item.

Yeah, that is definitely an option.

We could have used the reference instead.

But just keep in mind that, yes, you always can also use the inline function where you just need to

set up a function and then call whatever function you have in the USA.

That is always also your option.

And now of course, let's work on removing that individual item.

So in this case, I would want to first create a button, I guess, right next to the heading for let's

go with button again will have on unclick.

And in this case I will set up a function reference.

So here, let's set up a curlier versus online will have again our function because we will invoke our

friends here.

So say remove item and now we want to pass in the idee and then I'll say remove, let's say that.

And at the moment, it complains, well, you haven't created this remove item, so now of course,

we need to work on our function where we say remove item and line.

This remove item is going to be looking for the ID because, of course, for each and every item, I

can grab that idea and then notice how we set up the arrow function and rewriter.

We invoke the remove item with that specific idea.

So essentially what happens?

This doesn't run each and every time we run the wrap.

In fact, it runs only when we click on a button.

And this is going to be the first case that I talked about before when we talked about the events where

you must have this our function.

Each and every time you are invoking this function, you must have the R-AL function because you would

want this to run only when you click on a button.

And in this case, you have no other options since you are passing some kind of argument you are invoking.

And so that's why you always need to return it from the Arrow function.

So we have our remove item to remove item is always going to be looking for the idea and now let's set

up the functionality.

So in the remove item, what I would want is to filter out the array so all the items that don't have

the matching ID, I would want to leave them in the tower, the one that has the matching.

That one of course I would want to remove and now I can say set people and then set up the functionality

right here in the parentheses what is always an option.

But as far as the story goes on projects, I always like to be a bit more explicit where I'm going to

create a new variable.

So, for example, let new online people and that is going to be equal to my people state value.

So my original van filter I'm filtering.

And then for each and every person going to have, I would just want to remove the one that has the

matching.

So if I go here with person, I'd remember I'm filtering out the array.

Correct.

And then each and every object is there.

And then I'm saying, hey, listen, if the person matches the idea that I'm passing in, then of course

remove it.

And the way I can do that, I can say exclamation point and then equals to an idea.

So essentially the logic is following where we pass in the ID, then we filter out our array and all

the items whose IDs are not matching to whatever we're passing in.

Those ones are written in new people.

Now, if you want, you can control it.

But in my case, I'll pass in the the set people.

So I have my function.

Like I said, I can pass in whatever I want.

So of course this is that new array that we're getting back and I'm just passing in into the set people.

And what you'll notice right now that we have our buttons and the moment I click, I remove that specific

item and I click on John, I remove John, Peter and Anna.

And of course, once I refresh, I have all my items back.

Now, if I want to remove all the list, because I can do it also as well.

A few takeaways.

We can set up this logic right here where we're passing in the new value because remember what filter?

We are getting a new array anyway at the end of the day.

So in my case, I just like to go a bit more explicit where I'm creating new variable and only then

I pass it into the set people and the second one is going to be pretty common.

Gotcha.

Where since we have either function reference in here or we would want to invoke, of course, the function

that we're getting back from the state, since in both cases we're passing in the argument.

We're also invoking it.

And that's why we always need to set up the Arrow function, otherwise it will run right away.

So essentially when we ran the rap and that it will invoke it online, in that case, we are not running

it when we're clicking on a function we are running at the moment, our app runs and that's not what

we're looking for.

But those would be the basics, how we can use you state hook with another.