Before we continue on, we made some small mistake here.
We need to put this wine inside the components that is the provider.
So let's cut from here and put it inside the components.
So if you save it, I'm going to have a start.
So the next step is that how can we add data into that before we continue?
Let's go ahead and then access the original state here inside the to do list component.
So back to the to do list components, which is this one, to be able to use a data from context as
we did before, we need the use context and we also need the to do context.
So inside the to do list here, I'm going to call the use context and our pass in the to do context.
So what comes back is the actual data.
So I'll call this one as a state and if you go ahead and then console.log states, let's see what we
are going to get.
So let's open our console and you can see that we have an object with a state which is an empty array
and this is what we call context.
And we have done that one in the previous video.
So if I pass in 1020 and save it and you can see that I have array of to record inside that.
So let's continue.
So back to the context, how can we add data?
Remember, we can pass function to the value here.
So let's go ahead and create our first action.
Remember from the slide to allow reducer to make changes to our original array unless we pass in the
action type and the payload.
When the payload, it means the data that we want to add to the original data.
So let's go ahead and then create one action, make sure that you create it inside the provider.
So the first state is going to be as ADD to do.
All right.
So how are you going to create it going to be a normal function called add to do.
And I always like to add an action to it.
And this function is going to take in a title that I want to create or I want to add to mine to do.
And here we are going to call the dispatch function.
This function is given to us by the use reducer, which is this one here.
So for this we are going to pass in what is called the action type and then the payload, the action
type is going to allow the reducer to be executed.
So here we go.
You provide what is called type and here you provide the action type code to do.
We often use what is called upper casing here and that is a type.
So with this one, if I go ahead and then call this function called add to do, we are going to see
something inside the original array.
Before we get into that here, let's remove the payload for now and let's add what is called go shopping.
So what is going on here?
This means that if we dispatch our action or call the action and then our reducer is going to be triggered.
Why?
Because the reducer is going to look at the action type, which is hard to do and indeed it is hard
to do here.
If it sees that, then it's going to add this one to the original data here.
So now let's see in action.
We need to pass this function to the value here as core add to do action.
So inside the to do list we have access to the ad to do action.
If you console.log the stage, you are going to have the action on the stage.
So let's check it out in the browser here and objects and you can see that we have an action, but for
this action we need it inside the active component.
So I want to copy this one and then go to the attitude and then let me bring it here.
We also need the use contexts here.
So let me bring in the use context and I need the to do context also.
Now I have all the ingredients.
Let me have some space.
So here we have our use context.
So what I want is the action so I can do structure from here as to do as ad to do action.
Great.
And I also want the states let me see what I pass in here, which is the state here.
So here I also need the state.
So if I console.log the action, I'm going to see the action and that is my function.
So how can I trigger it?
Well, on the button we are going to add an event listener called on Click.
And our past in the ACT do function.
Great.
So this function I'm going to pass in what is called a title to call the function inside the event handler.
Unless we give it to an anonymous function here, in that way we can call our function like this.
For the meantime, let's ignore the arguments.
So let's also console.log the state here.
So as soon as I click on ADD, let's see what is going to happen.
Now let's refresh it.
And now you can see that we have two data inside.
But as soon as I hit ADD, let's have a look where something happened because it refreshes my application.
To avoid that, let's add our submit handler here.
So here is a function const handle
submits is equal to the event and inside our prevent the browser default prevent default and I will
pass in here as on submit and it's going to be as handle submit.
So this one, let's try again.
Let's refresh it and let's hit send.
And you can see that now our states, we have a record.
You can see we have the ten, 20 and then the shopping property that we add.
So what is going on here?
Let's go over the code again.
Back to the context.
This how it works.
Any time we dispatch an action as we see here, we add dispatch in an action.
And this action contains what is called payload.
But for our case, we are not passing in any data here.
So as soon as the Action Dispatch, then our reducer is going to look up the action with the type.
If it matches what is inside the reducer, then is going to execute our logic.
And our logic here is that take all the original array and add this one to it.
So what about if we want to make it more dynamic?
That is why we need to pass in another attribute called payload.
It can be anything here.
So for this we can say study.
So now how can we have access to this inside our reducer here?
So if you console.log the action inside here.
Let's consider that.
Now, let's go back to our application and let's refresh it after refresh.
And you can see that nothing seems to be displayed.
We have the normal console.log because I have not triggered or dispatched any action.
If I click on ADD, I am dispatching something.
And here is a clue.
You can see that for action.
We have two properties.
The first one is a type and then the payload.
Our payload contains the data that you want to send.
So for this, we can replace this one with what is called action dot payload.
So with this one, let's go ahead and then trigger the action again.
So now let's hit add this time around.
We have studied in an hour array.
So that is about the payload.
So now we can go ahead upon calling this one, we can pass in our title.
So back to the juju context, we are going to move this one and pass in the title here.
So back to add to do, we are going to pass in the title.
So inside this, we are going to allow the summit handler to call this function for us.
So let's remove this one from here and let's place it here and here.
We have access to the title as we pass in here, the title from our state, and that is it.
So now let's check it out.
If I enter, let's say Eden, you can see, I guess, some strange error here is that a component is
changing from control to uncontrolled, meaning that we are not passing in our handle change or it's
supposed to be value.
Sorry, guys, ask that.
So let's save it and let's refresh it.
So now React is happy.
So let's say it in yen.
And when I hit send you can see that we have a new data by adding what is called eating.
If I add what is called walking and I hit, since you can see that we are adding record into our initial
state, how are some areas?
So the next video we are going to create a function to save this record into local storage.
Let's get into that in the next video.