Creating an Add Course Action in React
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

[00:00:01] Hi welcome back to the reactor cores in the sky. We're going to be setting up the action button for adding in course to our schedule in our course library component was to be set up the action on our schedule. So the first thing we want to do is let's go into our index that Jacen our actions and let's set these old values to the false evil so that we are not enrolled in them. Now let's set up our course action. So in our time. Let's take our for a concert and that course is equal to and of course came back in our index or index check. Yes. Let's go ahead and type out the action. So export function of course callers who are returning with the type of course make sure you're importing that at the top here and a payload. Of course awesomes. We've got the action set up. Let's go ahead and see what we're going to do next. Case of course library. Let's go ahead and import it here somewhere. Of course that was added to our map dispatch props. So course we're passing and of course here like we are and remove course action. And then once dispatch of course. OK so what's going on here. Well that column here since this is no object that's set up. Now we have access to coerce so much like we have access to fetch courses so it's the same thing. And here let's add in a button that we can add a course with. [00:02:11][129.1]
[00:02:11] So let's go to our scheduled Jasson and just copy this tag here and use this to copy that good of course library. And we want it next to our title. Let's go to the completed app or let's go. Yeah okay so we have our up and down button here and then we ever put that an up and down later but it was not in this. Ever title tied all on the same room that we have had. So I believe we want to add that there let's go ahead and put it below the container for a title. So let's put that there and then put an arrow there. Right now let's just name the first one let's just say arrow per hour drop down arrow. And then for KLOS nameless just to see these and leave a going for now and we want to always display this OK. Let's just let's just get rid of claustrum for our Arrow and let's get rid of the producer action call. So now let's just go ahead and without some taxes we have action. We don't want it to say Slotman move. We want to show this but we're enrolled. We want to see. So let's make two of these because we still want to remove him and say OK if in enrolled then we want to hide the button and then if we're not you know we want to show the ad and remove it we're told we want to show the remove button and not nearly all died. So save that and then let's go to our browser here and see what we got. [00:04:28][136.9]
[00:04:29] We have Arrow and now I only clicked on one of these and it says this dot prompts or of course is not a function. And the reason is saying that is because we haven't added that in here. So let's go ahead and replace it with of course for the app when we. Let's just go ahead and copy this and put it in. Of course that way we can move the course as well. OK. And make sure we're passing and of course here each of these actions we're dispatching. So that should set up our actions and our buttons. Let's go and see what happens. Nothing. All right. So that's our actions in the next guy. We were going to set producer for our course and then we will be on our way. So let's go ahead and commit our code status. Commit an aide and remove button to course. Why. For every component and set up of course action get push origin master and I will see you in the next guide. [00:05:52][82.5]
[348.5]