React.js Academy for Beginners with Firebase | Chris Dixon | Skillshare

React.js Academy for Beginners with Firebase

Chris Dixon, Web Developer & Online Teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
46 Lessons (6h 33m)
    • 1. Welcome to the course

    • 2. What we will be building

    • 3. What you will need for this course

    • 4. Create React App

    • 5. Project files & folders

    • 6. A closer look at components

    • 7. Components in action

    • 8. First look at state and JSX

    • 9. Component lifecycle and looping

    • 10. Passing data as props

    • 11. Passing methods as props

    • 12. Prop type validation

    • 13. Controlled components

    • 14. Uncontrolled components and refs

    • 15. Create new card form

    • 16. Setting up React router

    • 17. Passing props to a router component

    • 18. URL parameters

    • 19. Using withRouter and push

    • 20. Passing state via router

    • 21. Setting up Firebase

    • 22. Pushing data to Firebase

    • 23. Reading data from Firebase

    • 24. The where & orderBy methods

    • 25. Deleting cards and lists from Firebase

    • 26. Deleting boards

    • 27. Updating data in Firebase

    • 28. Edit card modal

    • 29. Updating the card text

    • 30. Setting the labels

    • 31. Text area auto resize

    • 32. First look at onSnapshot

    • 33. Working with document changes

    • 34. Realtime cards with updates

    • 35. React Context API

    • 36. Firebase Authentication and set up

    • 37. User sign up

    • 38. Logging in and out

    • 39. Listening for auth changes

    • 40. Conditional rendering

    • 41. Rendering boards based on user

    • 42. Redirecting and error messages

    • 43. Roles & permissions

    • 44. Building for production

    • 45. Deploying to Netlify

    • 46. Thank you

12 students are watching this class

About This Class

React is one of the most popular and in demand technology in modern web development!

This course is designed to teach you everything you need to know to build modern applications using React.

Using a component based approach, React allows you to build interactive user interfaces using Javascript.

This course is completely project based and everything you learn will be instantly put into practice into one big project.

We will be building a Trello inspired project which will allow us to take advantage of React's features including:

  • Scaffolding projects using Create React App

  • React file and folder structure and what they do

  • What components are and how to use them

  • Writing JSX

  • Class based and function components

  • Managing state

  • Looping through data

  • Using props to pass data and methods to components

  • Prop validation

  • Styling components

  • Forms and inputs using controlled and uncontrolled components

  • Setting up React router

  • Passing router props

  • URL Parameters

  • Using withRouter and push

  • Using the router to pass state

  • Context API

This course is designed for beginners to React, or if you have tried it before and not quite managed to grasp it.

Although HTML, CSS and some basic Javascript experience will help you get the most out of this course.

However we don't stop there! Even thought React handles our user interface, most apps also need a backend too.

We make use of Firebase to provide a realtime database to our project.

This will allow us to not only store our data, but also to keep subscribed to any database changes as they happen, along with the following:

  • Setting up a Firestore database

  • Pushing and reading data from our database

  • Updating and deleting data

  • Sorting and filtering data

  • Realtime data using onSnapshot

  • Handling document changes

We also use Firebase to handle authentication. Users can sign up, log in and out, allowing users to have their own personal boards which only they can see and edit.

We take advantage of React's Context API to pass the users auth state throughout our application, and handle conditional rendering.

To round things off we look at how to build our project for production, and then deploy for the rest of the world to see!

So, if you are looking to learn React, along with building a fun project, enrol in this course and I will see you in class!


1. Welcome to the course: Welcome to the React Academy for beginners. In this course, you will learn everything you need to know to get going with react to build user interfaces all while bills in a real project. Put your new skills into practice. I brought this course. You will be built in eight fellow inspired application, which really shows you what you can do with react. We build boards to group together your ideas on organize them with lists and cards, all while making use off react components. These are also edit herbal so we can click on them to change the names on. Also, the cars have a puppet model where we can change the content and also add or remove any labels it's up gives us the chance to understand react concepts such as passing data with props, working with state forms, route in component types on life cycles, custom methods and so much more. This course is beginning friendly, so if you are new to react, we'll go over all the basics. You need to get started and then step things up throughout the course to give you a deeper understanding off react. Although we should already have a familiarity with HTML CSS on basic Java scripts to get the most out off this course well, not just rebuild in the front end of the application, either. We also make use off by your banks to create a back end ball project to. This will give us a real time database to store all of our data, so we will persist after a user returns on. Also, any changes we make, such as idea Removing off dating will update on the application in real time, meaning changes will take effect right away. We don't needing to reload the page. We also enable users to sign up on logging toe Arraf. This allows users to have the own personal boards which only they can see or at it. Longwood, learning about things such as conditional rendering documents, now starts authentication, sorting on filter in listening changes and also the react context, a p I to round off the cost by learning how to build your up for production on finally deploy for the rest of the world to see. So if you were interested in learning react, I want to build a fun project along the way, enrolled in the course on I will See you in the class 2. What we will be building: this course is completely project based, meaning we're going to be building this fellow inspired application right from the beginning of the course to the ends. We're going to be adding to this step by step as we learn more about react on fire based you in the course, we're going to put it into practice. Everything will learn about react straight into this project so we can see it in practice. The project, which will build on for other course, is going to be inspired by fellow. And if you've not used fertile before, it's basically an application which will allow us to organize things by creating boards, which is a board for a certain subject. Where we can our lists and cards weaken list ideas, we can create labels and so much more. So when this application, we're going to begin on the home screen by allowing users to log in we day email and password. The offense occasion will be handled on the back end using fire base. This will give us a secure log in and sign our facility, where users can then register. They can then create boards. So, for example, we can set up our ideas for summer would create. This board would give it a different background color. That's golfer Green would create this bald. This is then and now saved to the back end database, which you provided by Fire Base. We can then go into a board, would create new lists to section our content. So, for example, we can say places to visit. We're not a crane new list, so things to do eat. One of these lists can have individual cards. I'm looking at as many of these cars as well like, Let's say visit Paris. We can then click on this the edit. We can edit the text we conard labels. We can remove them by clicking on them once more. We can only save old changes and these and then displaying inside of each card, looking at cast off the list. So such as paint house. This can also be clicked on and edit is looking at various labels. Save all the changes and all of these changes have pushed immediately to fire base and then updated in real time in our application. So this means that we don't need to refresh your application and two then get the data bark from all back end. This is all immediately updated. As you see here, we can also delete other cards are lists and also boards on these all linked together to So , for example, woman creating New board list of card. These are created by a certain user, So the use I d stored into each one, meaning, for example, if you go into one of these boards and then we delete this. This will also delete the correspondent lists and cards which are linked to each board. We can also log in with multiple users. Andi. Each user will only have access to their own boards, which have created, I'm considers if we log out and then looking as a different user, click on the log in button and then we redirected toe aboards view where we have a different set of boards created by this user. But aren't some example list inside of here and also boards on these a completely independent to this user. So this is going to be the application which we're going to build you miss course. This project will I was to demonstrate everything you need to know about react to build applications. We'll also learn a lot, too, about firebase, including a real time database authentication, Get an update in real time and then finally, at the end of the course, will make our site live where we'll pushes to production for the rest of the world to see. So what? Hope you're as excited as I am to get started with this course. In the next video, we'll run through a couple of things which needed for this course before we then jump into the next section where we start working on this project. 3. What you will need for this course : to get going. There is only a few things which you will need on the fact that you are taking a tech course probably means you already have some of these anyway. First of all, I will be using chrome as my Web browser, but you are free to use any which you prefer. However, I would recommend Eva Chrome or Firefox since he react. Developer tools, which will be using, is only currently available for these two browses. To get the developer tools, do a search for reactive tools on. As you can see here, we have the options for adding to chrome, also to add to Firefox, which you can find from this link here. So I recommend you go ahead and download these for evil, chrome or Firefox, and will really help throughout this course. Next, we have the node Js download, which is available from Node Js Dog. We won't be using node as a back end or a Web server, but it is needed for a lot of the tool in which we use when developing locally. So go ahead and download the latest conversion for your operating system and then click next through the installation. We also need a text at its two on. I'll be using visual studio code, which you can download from code dot visual studio dot com. You can use overs if you prefer, but this is one which I really like on I will be using for all the cause. It also has a built in terminal, which works well. I will take advantage of this when building our projects again. Any terminal is also fine to use if you want to use something different. But for this course abusing the one built in it TVs cold. So if you would like to use this, I recommend you go ahead and download your machine and I go through the usual installation process for your computer on then this is pretty much all we need to get going, and if else we need to use, such as any packages from MPM, we will download as we go through the course. So let's now move on to learning all about react in the next section 4. Create React App: in react early days. Creating a new project involved a lot off set up work we had to install and configure tools such as Bubble on Web Park on the set of time could put off a lot. All beginners no have a great tool called Create React Up, which is a really quick and simple way to get started, would react, but don't get caught up in all off the initial sets up on configuration on. It's also officially supported, too. We use Creates react up from the terminal, but it's only a few commands. So don't worry if you were not a regular terminal user, in fact, we could even use the one provided in visual studio code. That's open up Visual studio code difficult to Terminal on New Terminal If you also have a separate terminal, which you'd like to use to, this is completely fine, honest, no problems in doing so. By default, it will open up in the home directory. We can use the CD command just to make sure the Time CD. Then answer. They were taken to your roots. Use the directory we can then a time ls. This will end it. Give it was a list of files and folders for the user. Notice the desktop here. This is where I'm going to be. I didn't my project. So I'm going to see d into the desktop and his answer. You can create this project anywhere on your machine. What you prefer. I want to keep this only destined for easy access. Then I want to run the command and p X creates react up, separated by hyphens and then the name of our project, which I'm going to call react Hello? And then he sends a This may take a little while to run, since it needs to pull in all of these scripts. Dependencies on modules for react. The run notice e n p X command of the start rather than MPM MPX is a tool designed to easily install on manage Seelye packages. It basically allows us to use create react up justice ones without needing to install it on our system. So give us a few minutes to finish off and then pause the video and I'll see you when this is finished. Okay, so once this is all installed, we needs change into our project directory. We can do this point even type in in seedy react fellow as it stays in the terminal. All weaken drug over the project from our desktop. So grab the project folder, drug this over and then open this up. So, like this into visual studio code and you'll see this automatically opens up the terminal into our project location so I can now go ahead on starting development server. We do this with a commands called MPM stars. So on decision on his answer, this will then set up the development server on local host 3000. So this will even open up automatically in the browser Okun navigate to local host Port 3000 just like this, it's enter now I have a basic reactor up and running in the browser. This is where we need to go to view our project in the future. Unless you are running on a different part. If we want to make any changes, only to do is to go into the text editor then into the source directory on the app dot Js So don't worry about all of this code at the moment that you go down here in city P elements you say I am learning reacts say this. Saving this file will automatically cause the browser to reload and updates. We don't changes, which we decided in. So we don't need to worry about refreshing the browser after each change. That's it now for our project set up. Next, we'll go over what all these files and folders are which have been created for us using, create, react up. 5. Project files & folders: just before we go. Any further ones give you a quick overview of what all these files and folders are in our project. Since they being generated for us using, create, react up. I don't want to just assume that would know what's going on here, but I'm going any further. First ball. At the very top. We have the Node Modules folder. This is where all of our projects, modules or packages are stored. This directory is nothing specific to react. This is typical off any node project. That is quite a lot here if we open it up on this location is also where any of the packages which we install will also be saved. Later in the course. Will Donald packages such as Fire Base on React router using NPM, I will see these saved inside of here. This is also where our actual reacts package he saved, too. If we scroll down, it's quite a lot. We need to get down to ah, and there's react, react, um, and also the react scripts, which will take a look out in just the moments when we get to the package. Jason. Next up, we have the public folder on the public folder contains our static files, such as any images we want to use and also any hate mail. React has days index dot html file and if we open it up, scrolling down into the bomb, there is not a lot of content inside of here. If we go over to our project inside the browser and then go to view paid sauce, this is the page which you see insider here. It doesn't show any actual hate email content in here, even though we see something in the browser. This is because off the script tag down at the very bottom, which is this one here. Remember earlier we said that create react up, takes away the configuration photos so we can concentrate on creating our react up. Well, this is one of the things which it does. It will use Web Park to bundle together all of the files and assets we have in our project and then create a bundle file as the output. This file is then injected into the project using the script of the bottom. It injects them into any dom elements which we choose. Currently, it will be output just above the Dev with the idea of roots on This is the one I just here we can click on this bundling, which is the last link just here, and open this up into a new top. This is all of the contents of our bundle. Don't worry about everything which is inside of here. At the moment, it's all just generated code for development. But if we do a search so browse search of command or control F, we can search for the text. We are days when we search for I am learning react. I would see this text is down here they take a metal file can also be used to our scripts. Orphans too. But this can also be often I did as node modules. The next photo have is the sauce and this is where we'll be spending most of the time Judas costs. It's where well, aren't our raw code All of old job script files on components on all these will be included into our bundle, which we just looked up and this is how they make it into old final up. There is no strict structure on how we can do this. We're pretty free to organize your files and folders how we like. Although it is common to include a components folder into the source directory, I will do this soon. We will get plenty of practice right in components to a component is basically a block of code which will look at in more detail very soon. Next, we have the up dot CSS. This is a main CSS file which contains some default styling in react. It's quite common to see a structure like this where we have one CSS file per components. And in the case here, it's the up dodgy s. This up, doctor? Yes. Is one well made other changes in the last video again react is pretty flexible with things , but this is often used as a main top level components or a wrapper for the rest of our projects. We will be using this file to display our header as this will be on all pages Anam below, where we use a router to switch between different components depending on the page reviewing. After this we have the up dot test dot Js. This is a file if we want started testing to alright project. Well, we won't be covering testing in this course. Next we have the index dot CSS. This is a second that CSS file containing these styles relating into our index. Doctor. Yes. Again, this is just for separation and organization. I'm going to delete this file to keep all of the styles nicely together in one file. So it's a zoo, but I'm going to remove this and then open up the index dot Js because we're deleting this file. We also need to remove this import from the index dot CSS on to save this file. This is a main job script file which is going to be responsible for rendering our opt the browser at the top. We import in both react on. Also react on from a one node modules folder in react early days. It used to be in one large react package, but since it can now be used to build more by laps with drag, native or even VR apps, all of the core functionality is now stored into this rack module on any functionality related to Web APS is now in this separate import called React. Um, reac. Tom has a random effort which would see just here, which is responsible for rendering the contents to the dom. This run, the Mefford takes in two things. First, we have the content which you want to display currently our main up components. This is the main route components, as we mentioned before and it's often use as the project rapper when using this in a file, we also need to import it off of the top, just like we see here. Then second of all the location where one this up to mount to. I saw this on to a new line. This is Kourtney Saturn elements with the idea of route, which is the one we looked at earlier before, in the main index dot html. So the public index or hey, Jim O, this is the div with idea route which was seen before inside the browser. So this is basically saying it. Take my react up and place it here where we specify in the next page. The reason we do this is because we don't always use react for our full application. We may already have on existent project where we only want you to react in a certain part. But his case, our HTML page, may have lots of existing content. I'm looking simply aren't in a new element to mount react to. We can change this up to be anything which you want. We can add in some JSX code. Let's aren't a level to head in a title off, react yellow and then closes off. We will look at this JSX code in more detail soon, but it is basically a syntax we typically use and react mixed. Both hate smell and charged group together. If we save this file and then go over to the browser when I'll see, that's our Level two heading has been mounted the dom on. If we reload the view sauce, we still see that we don't have the content. All we have again is a Steve with the idea of root wherever react up as being mounted to. Let's just change his back to be able up components. Next, we have the logo dot xvg, which provided for the create React Up starter and then also a service work file. This is an optional file to register a service worker. We won't recovering these service workers in its course, but they used to make up work off line, often to enable things such as push notifications. If using gets well. We also have a dot get ignore file already set up. This is used to exclude any files which we don't want to push to get herb, such as any sensitive information containing passwords or any large or unnecessary files such as the node modules. But all this. We also have the package. Don't Jason. This file again is not specific to react. It's something which will see on aid regular no projects. It contains information about our up, such as the UPS. Name the offer along with any dependencies which will need for the project. Inside of the dependencies, we have the react ominous. Did we have react on? We also have the react scripts. React Script is a library used by creating react up. UN includes all of the scripts, UN configuration. We need the rodent react in the browser it converts. See dependence is we need things to chance. Bubble on Web Park. Behind the scenes, Nana bundles them all into a warn library. This also makes maintaining all these packages which easier since we just have one library to worry about when upgrade him. These dependence is in a no project will be a need to own old modules folder after running a MPM install commands All this is also being covered for us when we set up the project below. Our dependency is we also have some scripts. We already used the start script with NPM start to kick off our project at the beginning. It is also a command to build our project for production one protesting. Then we can also eject from react scripts we've talked about so far about how a lot of configuration is doing for us behind the scenes. However, we can use this eject script to get out of all of these hit of magic and then place copies off our configuration. Independence is such as where parking bubble and then place them directly into our project so we can edit these are cells. There is also some more information about this in the read me file too. Finally, we have a young dot lock file. We don't need to worry too much about this since it is auto generated. It contains a list of our dependencies on exact version numbers, which we use him, so they sit for our file and folder structure. We work a lot more familiar with this. As we build our racked up next, we'll take a closer look at using components. 6. A closer look at components: in the last video, we mentioned the word components quite a few times, and if you're still not sure what a component is, we're not going to take a better look at what they are. The components is a typical small part of your website, which we can group together and place in it to its own file. It can also be reusable. So we had a blood. For example. Component could be a book post this block. Post components would then be reused for each post, which we have even know they are reusable. We can still feed it data into it to make them dynamic so we could feed into a blood components, a block title, the blow text and also a image to see a real world example. This is the project, which will be billed in in this course, using that something such as static. HTML. We'll end up with a lot off Jupiter code. Each list, which is the free sections of garden, bedroom and kitchen and also each one of the individual cards on the list, would need its own hate mail markup. This would mean a lot of Jupiter hedge mill cold, however, the react way is the break things up into smaller pieces called Components at the top. A header is a component on We're going to solve this in a header dot Js file. Its components can also be rendered on every page, avoiding co ordinates into each page, as we would do with regular Hey Jim o Lo the head for this page. We also have a bold components in a file called board dot Js. A user can have multiple bowls, so this components can also be reused. It is past in data called props do in all things so chancy board title to change for each of you. In this case, the title is house nested. Inside this board, we have a list components. Again, we have one component rendered for each list in our database. This is another good use for a component, since we can again reuse it and then passing data or props to each one, such as the title on the functionality to add a new card next up. As you would have guessed, each card is a component to receiving props such as the text on also the labels. Each time a new list or card is added, the components will again be reused on. Everything you see here is a child off the main after Js components, which we looked at earlier. So this is how components are used in reacts. There is no hard and fast rule toe when something should be made into components. It's something you generally have to figure out for yourself as you create the project. But as a very general guide, we should use components if something will be reused. Auto group together related functionality. There's also occasions when a file is getting too big. This could also be a case for breaking things off into smaller components to now we have an overview off how our components will look. Let's get to work on creating them in our project. 7. Components in action: back over to our project, I'm going to create a Components folder in the source directory. So in the sidebar, let's create a new folder called Components. This folder is purely for organization and is not a requirement when using react. We can also break this up into sub folders, too. And we'll do this later. In the course. For example, we could have a head of folder inside containing all of the head of components and so on if wanted to, just to keep all files more organized next hour. Free components, which we looked out from the slides off board card on list inside the components directory . Greater new file. So the 1st 1 is going to be bored dot Js of the case. Be okay now. The components folder, the card dot Js we have covers will see, then the 3rd 1 is for list Yes, with a capital L. It is a common naming convention to begin a react component with a capital letter. First of all, let's go over to the board Dodger. Yes. For each components where we use react, we first need to import the react package from the Node Modules folder. We can do this. Wheat import React from react. React He had been the name off the node module, and then this one is an alias, which we're going to use in this file, even though we are requiring reacting every file we use. It's only included once in the final bills, so we don't need to worry about multiple copies in our project. Also, if we just add the module name just like react roughen using a file puff, it will be assumed that this is stored in the Node Modules folder. Next, we need to create a class which looks like this. The class name off board extends. React the components, then open up the curly braces. This is a typical react class based components. Later on, we'll also look at a never type of components. Well, for now, we're going to be used a class based components as it has a few extra features which will get into then at the bottom after these curly braces, export default and in the name of our class, which is bored export in this components will then allow it to be imported on, reused in over files. So above we are extending or inheriting all of the properties from react. Dot components Reactor components will give us access to various optional methods, such as life cycle methods, which will get into soon. But the one which is required is the random effort. The random effort, as it sounds, is the one which we need to render some JSX to the browser. Let's anti random effort inside here, which is going to return at some data. The data we're going to return is going to be some simple JSX cold. That's RD Hey, Chmiel pl Nimmons with the text off board components. If we say this file and then go over to the browser and we don't see any of the board components on the screen to be able to see this, we needs tell react where we want this to be placed. So let's go for the parents up. Torture. Yes, since we have exported this board components down at the very bottom, we can now imported into the file where we want to use it. So we're going to do this in the Opto Js so need to import our board components. And since this is not a node module We also need to specify the file path this is inside of the Components folder on the name was bored. We don't need the dot Js extension since this is assumed welcome them places, ball components, exactly where we wanted to display. Let's go in place off the tax which were added earlier. Let's move this and then the name of all components, which was bored. This is a self closing elements. So which needs on the forward slash at the end? And this is how we can place a component in total code using react. It just looks like a self close in Hey, html tag. So Charles and image as a quick side note, you may have noticed this app dot Js file has no random effort. This is because it's called a functional based components. I'm what I can look at these later on. So let's save this file and head back over to the browser. We can now see our board components. It's playing in place of over text. We can also know do the same for the list component to back over to decide by called to the list daughter. Yes, just as before, we need to first import react Rome React. This is also going to be a class based components, which is going to be called list. This will also extend reactor components so can then use all of the methods which is provided by react inside. Here we're also going to aren't the random effort to display our JSX on the screen. Well, I'm going to return some JSX inside here, just like before. Some simple text will do the job's list components and then it right down at the end. We also need to export the fold the name of our components, which is going to be list. So this will be nested in side of the ball components so can import it inside off the board dot Js Save this file and head over to the board right at the very top. Also going to add an import for a list un again. Since this is not inside the node modules folder, we also need to on the file path. This list component is alongside the board, so we just aren't built slash on any name off list The final step forward. This to display is to go into our random effort, American added, As a self closing elements so list As we already know, components are reusable, meaning we can add this in as many times as you want. So let's duplicate this. Let's say this and go over to the browser. I will see an error inside of the browser. So generally, as far as every messages go, react is pretty good at letting us know where the problem lies. I'm giving us the hints on how to fix things. The other message say's Jason's J six elements must be wrapped in an enclosing tag. Did you want a JSX Fragments? We will look at this JSX fragments soon. Well, this error is basically caused by a component not having a rougher over in the board dot Js . In our render Mefford, we are returning free, different elements. All these free elements are effectively side by side. When using react, though a component must have warn parents elements. As a rapper, it could be any element which would choose, but a div here would be fine. Let's start a div opening side at the top. We can move the closing tag right down to the bottom and then nest inside were free elements. If we now say this and go back over to the browser now we see a error. This should be extends within s on the end. So to our list never go. So say this and then over to the browser, announced the old board components and then nested inside. We have over two list components since we added this into our random effort twice by new can now move on to the car components, which will also follow a similar pattern into the board and list. We first import react at the top from the node Modules folder, and then we can create a class based components. So close card extends react dot components the curly braces. And then we can add our required Renda Mefford, which is going to return some JSX just like before. We'll also added the P elements simply. I'll put in it the card components, then don't forget, it's down on the bottom. We need to export this file so we can use it in over components export default. The name of all class, which is card these cars a nested inside off the list component. So let's imported over in the list, Doctor. Yes, we can import this at the top of the file. This is also alongside the list soldiers, needy, thought slash and then the name of the file which is called Now don't. In the random effort, we are put in at the P element that just could this outs another Conard a surrounding Dev. So we don't get any error messages in the console. We can paste this back in and then not inside is many car components as we like. I'm going to copy and paste the scene three times, then over to the browser. So now we see our board components are, but it wants. We then have our to list components, which is this one and also this one. Because we are footed the list two times here, each list components then has free cards nested inside. Which is why we see so many components on the screen. If we go over to the developer tools with right click and then inspect inside of the elements top. If we look at the hatchimals structure, we have a surrounding death with a ball component necessary inside. Then we have a full day of which is for our list, which contains the free card components inside. After this, we have a second day of which is for our second, at least components on again. This also has our free car components. Inside, Also in the console will see we have some error messages. If we go to the top of C, API elements cannot appear as a descendants off p. It's because off the way, we structured other components. If you go to the main rapper, which is up dot Js, we have the outer board components nested inside of this P elements. So we'll just move this up outside. So this file So it appears along assigned to P elements. And now I have no more areas inside off the console. So now we have all first look at how components work. Now we're going to step things up in the next section where will begin to work with data on also pass it to components 8. First look at state and JSX: react is a front end of you Library, therefore needs some data to work with. Later on, we'll be focusing on using fire base as old back end to save and retrieve data. But at the moment, I'm going to be using it some sample data to work with. I have provided some stumble data which you can download and use for this course, which I have here saved to the dashboard. So let's start by creating a new file in our project to stall this sample data. I want to add this in the source, so creating you file. I don't want call this the sample data dot Js If we open up this sample data, look and then a copy the contents by selecting all and then copy, then paste this into our sample data file. This is simply some data, so I can work with no components. We harm a boards array which is simply free, different boards which you can live through. But all this we also have some lists. These are linked to the board by the board. I d. They also have an idea entitle. And then it nested inside with some individual counts So this one, I will give us somewhat basic data to work with, you know, components when using react. The current data, which you have no components, is referred to as state state is an object on a component which contains data which can change, for example, will be using the state in the list component to store all of the current cars in the list . State is independence off each component to so we had free lists, just like we have here. The state will be different for each one. Since all of the car data is different. The state of the garden list would be an array of cards called New Table on Fix Fence. This components for bedroom one would have a state array off move furniture, paint walls on so on. Another useful part off state is iris dynamic, meaning If the state changes, such as when a user deletes a card, it will update all of the components, which uses data. State can also be anything surcharge if he uses Colonel again. If a pop up model is currently open, all the number of likes a post us to take a first look at ST Let's head over to the up about Js. I'm looking begin. It's on our state objects just after the line off function up, we can create our state object, then decided he weaken aren't any state which we want. Let's begin by adding a ball title and set this equal to a string off house ideas. The state can contain any names and values of the data we want. But remember, this is just the initial states, and it can change or be updated at any time. If we save this file and gold back over to the browser back into all project we see in the error message off state is not defined. This is happening because states can all abuse on a class component. Remember before when we created the board least an car components, we created this as a class, whereas if we go to the up dot Js which was automatically generated for us, you have a function based components. This function component is great for a simple function which just takes in any data as a prop. Well, look a proper very soon, and then it renders some content to the browser. Hello just to confuse you even more with react. Version 16.8. They did introduce something call hooks, which allows us to do more with function components, which we couldn't previously do. But that's not something we need to worry about just yet. So to add state, what we need to do is to convert this to a class based components on this is just a few simple steps. The first thing I'm going to do is to clean up this return statement on move all the unnecessary code. Let's take out the header on also the class name off up. Give us a safe. So now we just have a empty div inside of all return statements. Now we need to replace this first line off function up with a class just like we did in the board. So we need to extend the real components. So remove this. So this is a class based components which is called up. This is going to extends. React all components, making sure we still have the curly braces surrounding all of this code. Then, as we mentioned earlier, a class components needs to have a render Mefford, so we need to surround the return statement with this. If we could this return Simon out, we can then aren't in the random effort inside the curly braces based in the return statements. Save this file now should see no errors inside the browser. Back over to overstate in the doctor. Yes, we can access our states using the curly braces inside the Div. It's not a P elements. I'll put other states because of races we can access state with this top states and in the name of our state called All title, give this to save and then over to the browser. No, I have the board title off house ideas. So first of all, this is what is called JSX Code, which allows us to mix job script into our vaginal elements. He's curly braces, which around the states Ah, use when we want to jump into Java scripts and then run the cold inside. We cannot. Any job script wants into these curly braces, so can do some simple Josh groups such as five. I was 10. They will see the value of 15. All we can do is something that, such as a console log that just aren't a string off. Hello? Say this and then we see the value off. Hello in the console. Okay, so now let's remove our console log on the fire, plus 10. And now we're going to update our state with the value of our sample data. But how do we go about updating or set into the state? Well, we could do this with a method called set state. First of all, let's import or sample data so you can use this in the file. So import data from a string value of dot, slash and then sample data Democrats set up our initial board state to be an empty ray. Let's change the ball title to be boards. Answer this to be a empty ray. We can't update this with a crust method outside off the render function its adjustable render we can create a custom effort called Off Day State. We'll call this in just a moment from a button, but this is going to be a ES six. No function. We're going to update the states with the set state method. We can do this with this thought that state under these points to our current component instance So these States that lives on this component state is an object. Sony's passing the curly braces. The state which we want to update is this. Boards here toe on boards, and I'm going to set this equal to data. The bones dated aboard is our sample data, which were important on the next step, is to now create a button in a random Efford to then said the States. So inside relative, that's craze a button inside here we can add a click listener with on Click and said this equal to this thought of Day State, which is the name of all method. On a click, is a way off handle in the event very similar to a regular job script event handler, such as on Click on Change Your Own Mouse over with regular job script. They are all local case names. However, when the using JSX they must be common case just like this. So every word after the 1st 1 begins with a capital. When this button is clicked, when then it call our custom off day state Mefford in the curly braces, which will go ahead on run the code inside of here. After this week, and then it do a console log to check. The value off state has been updated. This is John script, so this goals in between the curly braces on the fact will do a console table. So it's better for my head looking an output this dot state no bones. Now let's check this out over in the browser. I'm having error. Updating States needs to be a colon, so rather than equals, said this vehicle alone, then reloads click on a button. Now see a table with all of the three pieces of information from our sample data, we have the free course titles of the backgrounds, the I D on the index number. So this is how we can update our state object using it, said states. We shouldn't be tempted, however, to set it in any of away, such as this dot state. The board is equal to some value. We have used this set state method for various reasons set in this start, state or boards just like this will not trigger a component of dates. If the state changes, it can also be less performing, too. Since multiple sets take calls can be watched together into one single update. Let's remove this on who will get a lot more practice off dating states June's course. Next, we'll look at how we can loop it through this data on how to set the initial state when a component first loads. 9. Component lifecycle and looping: having a button like we have here to load our initial states is not something which is very practical for this use. We need a way to set the state assumes the component loads. I'm we can do this using a lifecycle method called components It mount. When we created our class components, we said the one and only required method we need is the random effort. There are also some optional methods to on which we going to know Look at is called components did mount As its name suggests, it will run any code we aren't after. The component has been mounted it to the dump. A good example of one makin uses is going to be to load the sample data into our state. I'm going to under so over in the update. Yes, just below our state objects. That's on the components. It mounts. This is a method. So are the brackets on the curly braces. So I often aren't my state at the top, followed by any lifecycle methods such as this, then any question methods and then a followed by the render. This is completely optional on it's up to you. Are you like to lay these out. But this is just something I've got in the habit off doing component in Mount needs to update the state. So let's copy this line from before based. Always Set state Medford inside of here. We can also remove these updates. State method. Save this file. If we now go over to the browser on the refresh we now see our state has been updated with the console dot table without sounds. Click on our button. The art of the life cycle of methods available to such as component did updates, which will run some cold after a changes caused a component update. Channels changing states. We also have components will amount to perform any actions we need to do after the components has beena mounted from the DOM. This town leases with free boards from all sample data, said the state. And typically, what wouldn't I want to do? It's a loop through these and then display the data in the browser. Since our data is in an array former, we can use the job script array Mefford called mop. This is just regular job script on nothin specific to react if we go to the after Js, we could go down to the random effort. I'm going to replace all the contents with all mop to remove the free elements inside of our dear upper and then inside a here. Since we using Giles good, we can use the killer braces we can access state just like before. With this start, states remember, this is pointing to a component instance so you can access state with this dot states and in the name of boards. But I'm going to call the dot math Mefford inside. He will come past in a variable name off board each item it finds in the array Thank rating arrow function. This is going to be responsible for displaying each one of all boards. Let's aren't a div which is going to surround each one of the free boards. You know, a sample data, another canal port three elements, one for the I D. One for the title and then one for the background. So, first of all, let's create a spine Elements which is going to display the board I d so can access each board with this ball valuable then plus, in the i d next up a level free head in, which is going to display the board title again in the curly braces and then third. And finally, we can aren't a PLM owns, which is going to display the board backgrounds. Okay, so now we can say this and then go over to our project in the browser. It will refresh we do. You see our free boards on the screen. We've got the garden ideas. We have the house ideas on also the course ideas at the top with our board title, our I D and the background color. However, in the side of the browser, we do see the console has an error message off. Each child in the list should have a unique key prop. When rendering out a list of items just like this, we need to also add a unique key for each elements. This helps react, identify which items have been added, updated or removed. But now we can use the board ideas a key, but later will use the fire base unique i d. For items. So back to the Opto Js, we can go to the rapper, which is this def. Looking at a key which is going to be equal to the board those I d then barcodes the browser. We now see our error message has now disappeared. These keys must be unique. So we had more than one board with same key. This will cause an error in the consul to Okay, Good. In the next video, we're going to replace these rendered out elements with an actual components and discover how welcome pass data using props. 10. Passing data as props: In the last video, we displayed each board item by looping through, and I'll put in the hedge mill elements. Now we're going to replace these free elements, which was the board I. D. The board's isil and the background color with a board components. If we go over to the up doctor. Yes, I don't have the board components imported at the top of the file. So now we can use is in the side of the map Mefford in place of all the existing code. So rather than this run give, we can replace this and then inside the mouth, my food. We're going to simply output the board. If when I will say this and go over to the browser, there is quite a lot going on here so I can clean up the board components to simplify things. So let's go to the board dot Js, which is currently output in the title and then it to list components after places just with the title of ball components. It will save this. Things become a lot more clearer since we know I'll put in our free boards one for each item in our sample data in the app dot Js Just because we have this ball components nested inside, this doesn't mean in her. It's all of the data, which it needs. We have to pass any data to the board using props, Props is away with first data to a child. Components I e. Props always get passed down the component tree on that. This is one of the golden rules off React with passed down data as a prop on which state we always lift it up, meaning If we heard it state, which is shared by two components, we always lift the state's up to a parent components so above components can then have access to it. We passed on props just like a hate symbol attributes and then give a name on day value. So, for example, we want to pass our props. So this board information to this board components we can are the attributes Anyone said this prop name to be bored on the day to want to pass is going to be in the curly braces on that. This is going to be the board data from all mop. Let's onboard into here. Give this a save. We can then access the board prop inside off the board components to head over to the ball doctor. Yes, where access is is very similar to what we did with State rather than the star state. Inside the curly braces, we access the props with this felt props. The name of the prop which you passed down was the board. So they stopped props the board. And then we have access to the board title, just like we did before. In the last video. What was the browser would know. What? See our free board titles, of course, house and garden ideas. We can also pass props down more than one component Level two. I'm walk over this very soon. Now I want to put this into practice a bit more by creating the home page, which will display a board preview components taking a look out of the final project. This is what we're going to be created. It will be a board preview components for each one of the boards on screen, and then if we click on this, it will be taken to the full old view. Let's create this inside of a new component folder, open the sidebar. I'm looking. Organized the components by creating a pages folder inside here, as in this Pages folder has no difference on our components. The only change we need to make is the file path. When important inside of this page is folder. I'm going to create our file. The view. Would you seen on Colisee? Home doctor? Yes, always. Also a component to. But since it's going to be a page view, I've added this to the Pages folder to keep things more organized. Now go ahead and create our components by important react. Rome React. This is also going to be a class components which is going to extend. React all components, curly braces. This needs the random effort, which is going to return some. JSX on All I'm going to add for now is a level one head in with the title off home. The final thing to do it down at the bottom of the file is to also export this with the export defaults. The name of our class, which is home, this home components. If we take a look art of the finished view, it's going to be a rapper for all of these bold previews it thing going to past on the props for the ball title on also the back wrong Color. So first we need to create the board preview component, which will be used for each one of these items. It's great. New file in the sidebar. This is not in the pages. This is just straight into the components, and it's going to be the board preview, don't you? Yes, this is also a class based components, so that's import reacts Rome React. Great of a class. This one is called the board Preview. So extends react don't components plus in the random effort and then return over J sex code , which for now is going to be a simple P Elements Golf Ball preview. They're not the bosom. Let's not forget to export default of a class name awful preview, and then it once you don't give this file is safe. So we now have a situation where we needs passed on our props down to levels the state is stored in the after Js Well, they need to process data down to the home components, which is this rapper and then from the home components down to each one of these ball previews. Luckily, this is not too difficult to do. The first step is to actually display the home components. If you go to the Opto Js, we can first import the home component which you created. Rome will file path, which is dot slash components. Remember, this is also in the pages folder on the name off, home, down in the return section of Allah. Random effort. We can also replace all of this with the home components and that's just check. This is displaying in our projects. So now we see the home components. The next step is to pass this home components the state of boards so we can do this by a props. The board is going to be equal to this. That states the boards. So this is our props now passed down one level. Let's go to the home Dajae address where we can no access these props the next day. It used to past them from this home components to the ball preview. The first thing we need to do is to actually import the ball preview on this just lives inside off the components folder we can access is with dot, dot, slash and then bored preview. So down in the random effort, we could simply are put the ball preview. But remember, we do have multiple boards. In our case, we have free stored in two states. So therefore we need to mop through this data and then I'll put a board preview components for each one, just like before we use this top props the boards. Since it is free of them, we're going to call the job script Mup, Mefford Each one. We're going to get a key, which we use in just a moment. But first, let's put the board preview so each item is stored inside of this key variable, which we can now use as a key and then pass to each individual board as a prop. So as we know from before, we also need to pass this key as an attribute and said this equal to all variable of key. And then when it's passed on the individual board to this ball preview on this only separate lines with more readable we could passed on the individual board. I'm looking accesses with this about props, the boards. So this is accessing all the boards which received by a props. We can then pass in the key to get the individual board from the board's array. Remember that this key is each individual item. So the first time it lives through the boards, it will. And I'll put a ball components or a bowl preview and then pass the individual board. It will then look through 2nd 1 also ill put a second bowl preview and then also passed the second board as a prop. It will endure this for each item in our ray. So if we say this, we can now go over to the board preview and make use off this board prop. So the ball preview, Doctor? Yes. Inside of this return statements, we can remove the hard coded bought preview. You can then access this. No props. The board prompt. No, we can access the board title. So let's say this and refresh Before we go any further, I will see in the console we have an error. So we have no unexpected talk. And in it the home doctor. Yes. So back over to the home. This is because in our return section we are putting it to adjacent components. Let's remove this hunts around this in a diff because remember, react will only allow us to have worn pair an item as a rapper. So at the end of the recent sexual, we can close this off reloads. This now gives us a error message off. Cannot read property title off undefined. So why can you not read the title inside of other components? So the ball preview this is this line of code just here? Well, the reason this is happening is because although all boards in the sample data are stored as an array, each individual board is stored as an object. So we have in ST Honore of objects. If you go to the home components inside here, we use need daughter mop method. Ma is Honore Method, But were you trying to use it here on a board? Object fixes. We can wrap this dot prop starboard's, which is an object in the object darkies method. So let's could this top prop starboard's and then we can use objects darkies, then inside of the brackets come paces back in object or keys is a object method which will pull out all of the objects property names and then return an array. So here we basically converting this object data being array. Therefore, we can use the daughter month Mefford on Everything should now work as intended. This object or keys is a regular jobs, good method and again, nothing specific to react. Now, if we save this file and go back over to the browser, this ever now goes away goods the things in our work incorrectly. We've passed the board state down to levels, and then I'll put the title in the ball preview. Well, you know, I say stage will have nested components. Uncommonly, all we can see is plain text in the browser we don't have in a rout in places which between our pages or components, it can become hard to visualize exactly what is going on with double components. To help with this, we can use the React developer tools, which is available for chrome and Firefox. If you have installed them early in the course. When setting things up, great. If no, go ahead and search for the reactive tools on at the extension for chrome or Firefox. Once it is done, you build to right, click and then inspect. And now we should see the react developer tools available to select. So click on this. The reactive other patrols is something which will use quite a lot for this course. So we'll get lots more practice. We can see criminy in the component tree. We have the main A proper We can open this up and then inside we have a surrounding Dave which will contain our home components. This is exactly what we see in the up dot Js. We have our components, we have our Dave and then we have our home component nested inside, which is passing down the boards as props. We can also see the props inside the developer tills. If we click on the home components we see we're passing down the boards as props, which is an array would free items we can inspect this on, but see all the information for each item. We see that although these boards Honore, these individual items are an object, which is why we needed to convert each item with object talkies. If we open up the home rapper with N. C inside each of the board previews, they also have the key. You will all react to correctly update each list item you can select the's on. We also see the props which passed down. This is an object with the individual board where we can access the background. The i d. On the title on its this title, which we've used the I'll put the browser as well as props. If we go to the main components, we also see these state, which is component holds on. This is the information which you pull in from the sample data and then passed down via props. So these developer tools are really useful and will make use these as we go for the course next up, we're going to stick with these subjective props and take a look at how we can pass methods between components. 11. Passing methods as props: It's not just data we can pass down to components. We can also pass down a method to the method. We will be. I didn't soon is to create a new board which will update the board's state in the upto Js now since we are updating the ST stored in after Js, we also added the create new board Mefford inside here too Let's go over and create is now in the app dot Js held his file and then it just under our component will mounts when crazy a custom Mefford called Create New board is going to be a s six are all function which is going to take in a board which will pass to it soon. So here we're going to update the state a little bit differently on this. Take a look at how we're still going to use this dot set state inside he was still going to plus in an object on update or boards. But this time we're going to create an array. So he went updating the state's when using react, we usually don't want to mutate the state directly. It is best to first take a copy off the existence, states. You can do this with the spread operator, which is the three dots. We can take a copy off the existence states by using this, don't state the boards and then after this separated by a comma with emerging our new data which is going to be this board variable which will pass in that to all method for McAuliffe will process the data about the new board. Well, let's update the states. Well, then grab a copy off the existence states and then emerge into its our new board. It will take a look at the finished version just here. This is the home components inside. Here is where we're going to create a new board, therefore triggering this method. This method needs to be triggered from the home components, meaning we need to pass a reference to this method. And how do apostate it down to a child components? We do this via props. So in the app dot Js, let's go down to where we render our home components. We can then pass a reference to all method. So create new board. In fact, we can on this on to it till nine and then we could set this equal to this and then I'll method name called Create New Board over in the home components, which is the home togs would create a button to create a new board. So inside of all Dave, that's great. Is now inside here we can create a click handler. So on click what? I'm going to create a new method called this Don't new board any tax off new board inside of here. So this new board method which we call in here, has nothing to do with the one we have passed down by states. We'll call this in just a moment. Let's go up on create is now outside off the random effort. We can now create this. So that's great on new board set up A s six auto function. So inside he we want to do two things. First of all, we want to grab all of the board data from our form and then we're going to call the Create new board method, which passed down from after Js At the moment, we don't have this form to grab this data, so I'm just going to hard called in some data for Now let's create our board objects. So Const Board is going to be equal to a new object. This needs a title. Call it anything which wants. I won't say trips to take this year separated by a comma. We also need a background for this board. I don't want to set this background to be a screen value of a zero f f a a. Next up, I'm going to add the created out property. This is going to be a new date. So the new it card of dates, we're going to be store in the state for the new board on also the new list on new cards. This will hours later on to return all of this information back in the order from when they were created. So this is all new board, No hard coded. We can. Then it call the Create New Board Mefford, which is being passed down via props and send off this new board as an argument. So, just after our objects, the stock props great new board person in this board which was created. So now this board will have passed with the create new board method. We will call it in the Opto Js. This method will then receive the board and then merge it into state. So let's save this and then go over to our project. We can try this sounds. Let's go to all up now the new board button. Let's click on this and then we get a instant update off trips to take this year. Great. This means we now have it. This new board added to state This is what we mentioned earlier when we said the each time the state is updated, react will lend updates all components which need that particular piece of information we can also see in the app dot Js If we go down to the States, we now have our extra board at it inside here. This is one which we just hard coded and then passed as a arguments with this method. If we refresh so this item will disappear since we don't have any permanent database just yet. But this is something which will aren't later in the course. Now let's move on it to the lists. If you look at this final board view and then click on any off the ball previews, well then it taken it to the board components This ball component we need access to all of the currently loaded lists. In our case, we just have thes free. I will also add a new list in put down on the bottom currently and over up. We don't see this ball view if we go over All secretly loaded is the home components and then it nested inside overboard previews so we can begin to work with this board components . We can go over to the app dot Js another scene temporarily. This will be until we introduce the routing in a later section. So first of all, in the up dodgy s make sure we still have the bold import from before and this girl down to our random effort. We can also add to the ball components inside of all, rapper opposes no one. Go over to this board Dodger. Yes, We're gonna add that the lists in state so each individual component can also have its own local states. Let's create the estate objects. I want you load off the Korean ists. I said this to an initial value often empty array. I've called the state the current lists because later on will also filter the lists to only show the ones for a particular board. We can annex rubble lists from the sample data, first of all by importing other top of the file. So we're going to import our data on the file path, which is dot, dot slash sample data and then once again, we can use component did mount to load these into state, so components did mounts. This is a method which is going to call this dot set states. Who says our objects, which is going to you grab the Koran lists and so this equal to our sample data, which is data lists, data being a variable, which we have it from all sample data and then the lists is the lists later, which will have just here. So now we have these current lists. What do you want to do with them? Well, we want to render out a list component or each one just like the free which you see here. I would do this just like earlier when we lived through the data. I now put a list components for each one. Let's get started in the board doctor. Yes. Let's go down to our random effort on welcome. Began it toe work inside here. So, first of all, in the surrounding death, let's on a class name which is going to be equal to list Rapper. This is full of CSS. I notice here how we're using it class name rather than it just class as would do in regular Hey, Jim O Well, when using react, the class word is a reserve keyword. Therefore, we're not in any CSS classes. We do need to use this class name attribute in its place inside here. We could remove our title from before then, inside of the curly braces, We're going to mop through the current lists. So just like before, we're going to use this. Don't state doctorate lists. So just like before this dot state dot current lists is an object rather than an array. So just all this. I'm going to cut this out on again, use objects dot keys and then inside the brackets, weaken paces buck in, just like earlier. This will convert this to be on a Ray sabic unused. He'd thought map Mefford girls who want to pass in the key set up the arrow function. So each list in states we're going to then rent out the list components. This list also needs to take in a key. This key is going to be equal to this. What state doctoring lists When angles passed in the individual list with this key and then it grabbed the I D. Make sure we still have the list components imported, other top of the file from earlier. Give this file of Save and then we'll go over to the browser and it check this out. Okay, so now we'll see our components rendered to the screen. There is quite a lot going on here, So let's clean up the list components that's going to the list, doctor. Yes, and then robbed and I'll put in or free cards. We can remove this on. It should look a lot more clear now if we would date this and as our free list components. So it is probably a little difficult to see what is happening here. So let's open up the reactor developed tools to take a closer look. So starting at the top level, we have the up Dodger. Yes, we don't boards, which in states inside of here we have a surrounding Dave, which will in our port the home components, displaying the course house and garden ideas. After this, we temporarily added in the ball component so we could see this on the board. Components is rendering out free list items on each list. Item is just simply opportunity text off its components, which is just here, will also soon our ports A list title and also the Count's. So with these lists now displaying on the board, we can do a similar thing too early in this video, and also on a new list over in the board dot Yes, we could do is by creating a new method just under component in Mt. Let's create a new Mefford called Great New List, said the soup as a arrow function inside here, we're going to construct our new list. This is just going to be sample data for now, but first needs out an i d for this list later on, we're going to be using fire base to grab this I d. But for now, we can use math, but run them to generate a new I D using JavaScript. The title, it's called is my amazing list. It's also needs to be linked to a board, so confuse a i d Let's go for free on roads. We can also add to the created out property unset this to be a new date using child scripts . So now we have our new list created. The next thing to do is now to push this to our currently state. We could do this with this dot set state, you know, objects on the state, which we want to update is the current lists. Just like before current list is on a race organ passes in Well, first, we're going to merge in the current lists with the three dots. So this don't state local realists separated by a comma willing or to merge into a current state. The list, which was created just above this, is all we need to do now for this method. The next step is to create a button to trigger this method. Photos. We do this down in the random effort, so let's just go under the list dropper. That's great. A button we can add eight on Click Event Handler, which is going to trigger our Mefford, which is called this thought Great new list and then a name off new list for Britain. So once this is done and give this final save and we can go over to the browser, let's try clicking on our new list button. And then we got a new list component rendered to the screen. If we go into our up and then into a board inside here, we can check out the current state full board. We now have our four least items. If we go to all the last one, which is one which we just added, we see the title of my amazing list. But again, just like before. If we reload the browser, this will disappear. Since we don't currently have any permanent storage to round things off rather than I'll put in the text off its components, we can access the props passed away instead, first of all, in the board dot Js, we can pass it on these props to eat list. We would have the key. That's fine, then, after this, we can also pass our list. We could grab the data with this start state dark current lists person in the key. So this file Anamika modifying our list components are put to the title. So off released, Doctor. Yes. First of all, it's on a class name to the rapper. The class name is going to be equal to list. But I will see assess. This title is going to also be in a surrounding div which is going to have a class name off list header and then closes off. We can all move our P elements inside of this head of section and replace the text off its components with all props. So, inside the curly braces, the stock props the list. No, we can access the list title. Okay, If all is working well, we should now go over to the browser. And now you see the title off our free lists. We can also click on new list. I'm not city title for this one. Too Good. So if everything is working and now for you, we're going to move on it to the next video where we want to look at proper time for validation. 12. Prop type validation: when passing around data between components, it is a good idea to provide some validation. Jacquet component is getting exactly the data which it needs. For example, if a component expects an object but gets an array, it could break our up. And this is exactly what we've seen before, when we needed to convert an object using object darkies. This will be using proper types, which is a library provided by Facebook to perform these checks. It is simple to get open running words improvises with errors during development. The owners. If our prototype fails, let's install this over in the terminal. We can close down or terminal with command or control, see no money to install this from MPM with the MP M I, and then the package name, which is prop types. It's answer and give us a few moments to install inside of your project and then come back once this is done. Okay, welcome back. Once this is installed, we need to import it into each file which receives the props. Let's begin at the top of the tree, which is the upto Js. This is the very top level, so it doesn't receive any prompts from of components. But instead he does pass props down to the home and also the boards later on. In the course the home components receives the boards on the type of the boards is in Ray and also create new board is a function. So let's begin over in this home component. How could begin a work problem? Validation. First of all, at the top of the file, we can import the package prototypes. Comfortable. P Auntie could impart this from the proper times module. Okay, so next I'm going to set up these prop types right out of the bottom. The file. I want to do this just above our export defaults. We can do this with the name of all components, which is home. Never gone. Set the proper types. So little case P. In this case, on immigrants, that is equal to an object which will contain the prototype for each proper, which is passed down. The 1st 1 is for the boards. Then we can set to the proper types, which is capital P anti, which is the one we imported up at the top. And then after this concert, what type of data we expect to receive if we time thought. We can see some of these suggestions inside here when we want. In this case is an array. You can also set this to be a required field which is required separated by a comma. We can also do the same for our second prop, which is create new board. Great new ball This time is a function and we can declare we want a type of function with bunk. This is also required. So also changes on to the end. The next thing to do is to restart our server with MPM stars. Once this is done looking out testes, aisles over in the browser, we don't see any problems at the moment. But if we change one of the proper types, let's say from array to be a type of object. Let's say this. I mean, I'll see a failed prop type that so called back and changes to be an array once more under , Then save this final. Let's go into the sidebar. The next one down is the board dot Js board dot Js is not currently receiving a props has moved down to the ball preview. We will come back to this board later on in the course, just like before. The first thing to do is to import the proper types and then, after this week in once more, go right down to the very bottom, just above our export default, the component name, off board preview and then set the proper time with a lower case, be as that it's up to be equal to object. The one and only proper that the ball preview is can is from home. And if we go up when we're internally board preview was sending the board prop. This is a type of object. Let's set up the prop types Capital P and A Capital T. This is a type of objects on that. This is also required to the next components down in the sidebar is going to be the card. Let's click on this. We will come back to this soon, since we're not using this card components just yet in our project. So finally we have the list doctor s components. This takes in a list, so also needs a proper type. Let's do our imports about the top in full prototypes from prop types scroll down. We can set these up at the bottom with less door prop types, so I will object up the single prop type. Which receiving is the list the prototype is an object on. This is also required to We will, of course, on today's. As we passed more props on also create more components, they can't doctors. Component we mentioned for is not currently in use, but we're going to make use of this now by including it for each card in our sample data. As we see here, the card component is nested inside off each list, meaning when it's on this over in the list. Doctor, as components, let's head over to the list. Dr A s arm. We can do this now. So inside here it's goes down the side ball. We're going to rent out a car components for each card in a list. Remember the sample data as a cards array on one card, a rate per list. So let's go through the list and we can do this now by my pin through all props underneath the title. On Underneath the list. Harder. Let's open up the curly braces this time is a object. So we also need to run object jockeys to transform our props into an array. The props once transform. Is this not props? The list Note cards. What? I'm going to mop through the results. Each item will be giving this key variable name. And then inside of these rockets, we cannot put one card per item found in the loop. And make sure this has to close and rockets, and then inside here, we can all put over card components, make you this is still imported about the top of the file, which is we cannot a key, but you're going to be equal to all key. Valuable. We can pass the data as props. This is going to be this. No props. Don't list dot com and then inside the square brackets would pass in the key. Close this off with a forward slash on the factors on this onto its online. There we go. Okay, so now we're rendering out a card on passing the props. Let's head over to the card, Doctor. Yes, We can all handle this data passed to it. At the moment, we just have a div which is going to rent out the text. So first things first we could go up to the top on import our prototypes and from the proper times package. Then at these right at the very bottom above our export default. The component name of cards. No prob times set up a object. The proper name is data on the prop type is an object, which is also required. So before we go any further, let's say this card components and then go over to the browser and we have a never in the list line 15. Let's go there now line 15. We have the data. This top prop start list. Andi should be cards within s on the end. Let's try this now. Good. So now let's see a list title and also the cards assigned to each one. It is a little difficult to see what's going on. No, because the styling is missing, you know, components. So we have bean, adding, it's, um, classes as we go along. Such as The list had a on also this list, and they have also provided some CSS to go with his course to make up look a bit better. You can find this CSS file as they download with the course. So go ahead and grab the CSS as a down lord. And then once you don't know, we can paste this inside of the app dot CSS. So I'm going to remove all of the existing styles and then paste in all styles which have been provided. So now if we give this final save and go off to the browser So now we can see more clearly our free list in the sample data, we have our list titles and then we have two cards inside of each list. So there is still a bit of work to do but can now see the list in cars more clearly. So this is it now for our prop types. I'm all answer this as we go for the rest of the course. 13. Controlled components: if we head over to any, you are all number such as that 12 free and then forward slash boards. This view is rented out by the home components. This contains eight new board button. If we click, this will end at some hard coded data to all board state. His new ball button is wide up off in the home Doctor. Yes, this is a button animal trigger a Mefford called New Board. All this board data is currently hard coded, but we want the user to aren't the bold name on also to select a color. Just as with any of the websites, we can do this with a form that's on this over. In the sidebar, we're going to go into the components and then create a new file for this called Creates Board form with the daughter Js extension at the end, I make you as you spelt rights. There we go. So the first thing I want to do is to import react from react just as we always do, and then it's going to be a class based component. Once called this the same as the file which is create bought form. This is going to extends. React. Don't components inside here we aren't I will required Renda Mefford, which is only going to simply return some. JSX. It's not a P. Ellman's with the text of high. Welcome back to this in just a moment and crazy perform first. Let's export defaults creates board form. So save this file and then we can import this file in it to a home components. So scroll up that it's off underneath our prop times looking importance create bold form. The final powerful needs is going to be dot, dot slash Then it is create board form scrolling down to our random effort. We no longer need this button, which we have here since we're going to replace this with a form. So in the place here we can add sour creates board form components close. It's off while we're here to weaken. Aren't a board preview rapper which is going to be a surrounding div And this will just add the style in which we need using CSS. We cannot have a class name. This one is going to be equal to board preview rapper and grab the closing div on at this just after the closing Curly Brace, this board preview rapper will give us the CSS grid layout for all of our ball previews. So save this file and then go over the browser. And now we see the text of high, which means our components is now being rendered. And also all free board previews and I've been displayed in the group former rather than in a list. So back over to the creates board form components, we can create our former markup. That's it over un in place, off this high text, we could remove this. We cannot a foam inside here This form is also going to have a class name which is going to be four create or rougher. The first of all, we need a import with the type of text This is going to be for all board name. So close yourself armed on a separate line I'm going to target the type which is going to be equal to text is also needs the name which is going to be equal to name and finally a place hold of on you which is going to be bored Name the second import which is form is going to need is going to be a select box. This is all the EU's gonna select the background color for this board. So crazy a select box that's open and close. This this select also needs a name attributes which is going to be equal to backgrounds inside here with an A list of options which were available for the user, I'm going to add six different colors. You can add any color von you which you like for these, or you can stick with the ones which I once Jews. The 1st 1 is going to be a blue value. We cannot this in using the value attributes on a hex value off 80 cc ff well to copy and paste this in five more times. Given those six option values, the 2nd 1 is going to be or a green color. The hex value is going to be 80 The blast the Blais. The 3rd 1 is going to be read, which is a value off F nine for a one e before phone is for a pink color. The ex volunteer this time is ffb read of laugh and then we have a purple second to last, which is BF 00 the blast. And finally we have the orange color. They seized a black a D that will free and there's over six colors. The last item we need Czar, is for a submit button with the text off creating new board. It's also needs a type which is going to be submit and this is all we need to do for all form. So save this file and then go over the browser and over the top we now see our imports off your name. We have all dropped down with these selected colors on, I will submit bottom. So this is our form now displaying in the browser. But now we need a way to get the data imported by the user. There are a couple of ways off doing this when using react first is what we're going to look at now. Called a controlled components, this generally means react takes control over the data which would type in and then stores it into state hatchimals form inputs such as this import and select. We have typically maintain their own states, meaning the other wear off what the user types in, and you may have used the event dot target value before the accesses. We can then access this value and place it into state. Once it is then in state, we can use it to create our new board so we can begin by creating our default states. Let's go over to create board form just underneath our class title. That's at our state objects. 1st 4 We conard it the title and said it's being initial value, often empty string. We can also say it's a default background based bring value off a zero C CFF, which is just our first blue value. So this will be our default background color. If none over a selected and scroll down in slow form inside of this import, we can create an in line event handler that's at the state. When a user types into the input, we can do this just under the placeholder. We can rt on a change event handler. Unsaid is to a in line function which takes in the event data as e. Then this is going to ruin a function which is going to ruin set states. We can pass this in as an object on that. These states, which we want to change, is the title which you want to said to e don't target the value Igor. Target value is the event data which is typed in by the user. Then we can also do the same for the back room to scroll down to our select just after the backgrounds Inside the opening select tag, we can also add an on change event handler this again in line person in the event data Great sorrow function which is also going to that state. We have the starts that states personable objects, but this time we want to set the background inside the state. This is also e no target the value. So each time the user times anything into the form all changes the select import. It will end run dysfunction on update our state. Next, we could test the soil by adding a on submit Mefford to the form to go down into all button . In fact, Well and this is the actual form. Elements are these onto the old nine This time the event handler is on submit Once a form has been submitted with them want to run a custom method called this dot handle. Submit This will cause that the Hon DL submit Mefford to run each time the form has been submitted so we can test it. Sounds above with a simple console log. Outside of all random effort, we can create a custom Efford off handle submits passing in the event data. The first thing to do is to run. E will prevent default. This will prevent it. The default behavior once a form has been submitted, which will then be to reload the browser on. We don't want to do this since won't react to be in control of when the patri loads and updates we can. Then it do any simple console log to the browser, which is going to put this don't state. The Star State will then show us the title on background, which the user has typed in wants. His form has been submitted, so let's say this and then go over to the browser into the console tub. Let's type anything into here, James. The value aren't great. New board on this looks like a hard A submit best. Let's check what's going on on all method up. It's a spelling mistake, so handle so myth on Let's try once more reloads Arm conard or test. Let's try with the default color, we have a title in the background. It's changing color and also recital. There we go. So now the state has been updated with the values input by the user. Now I can finish off all Mefford by creating our board. Installed this as an object that's true of the console log. Great. A constant call board. This will be an object which is going to take in the title which wouldn't grab from states . We have this start state don't title separated by a comma. This also needs to grow up the background. This is an easy one to this is this start states don't backgrounds. Then we can answer the value off created art which, just like we looked earlier, is going to be equal to new dot date. Therefore, we can grab these from the database in time order. We don't have any user data just yet, so you can add a simple string. Let's go for ABC on two free giving us the board data, which we need to send off to the database. If we go over to the up dot Js, we still have a method called Create New Board. It's also takes in the board, but we have this now which we can pass along with the Mefford. We do need to pass this method down as a prop and we'll get to this in just a moment. But first we want to aren't an if statement first check If the board don't title exists, we want to track if this board dot title is there because if it's not, this means that the user is trying to submit aboard without the name. We also want to check if the bold don't background exist too, which you should because we have this stored into state we can then it ruin our create new board. Mefford with this don't prompt thoughts. Create new board. Listen in our new board objects Okay, good. So now the next step is to actually make sure that these props are being received by this form. Open up the Js We have created new board Mefford which is set in the States. We accordingly person is down to the home components. Let's head over to the home dot Js this home dot Yes. Then it needs passage down to create board form. I'm gonna do this now. So creates newborns, and this is equal to our props. So this not props thoughts create new board. This should not be available in our form. Just one thing to do before we go ahead and check this out is we still have this new board method just above in our home components. We could not remove this since this isn't no longer needed. So say this on. Make sure all of all files are saved and head over to the browser. We can now test this out. That's not a new board. I'm going to go forward to do which is going to be a red color and then creamy aboard. What's great Newborn is not a function. This is over. And here, Little case W Let's try one more. It's hard to do in the color of reds, great new boards. And now we see all aboard as being pushed the state and then rendered to the browser to round off this video. We're passing props, so we need some proper time validation inside of all form So let's first begin in the create board form by importing our prototypes on law, prototypes package and as every working at this down in the bottom of our components just above Oh, export. This is great Board form dog prototypes level case P set of object. The single proper which we are receiving for this component is creating new board. This newborn is going to have the proper type of function which were aren't we don't funk on that. This is also required since we always want to be able to add a new board. Let's say this and go over to the browser and check. There's no issues on. Everything looks fine. Next up, A will continue looking art forms by taking a look out on control components. UN also using refs. 14. Uncontrolled components and refs: the control method we looked at in the last video is the generally preferred way to handle forms since react is in full control on can also handle any updates. Now we will discover on alternative way of creating a form in react, and this is called on gun control components. This way, the form data is handled by the dorm, and it can be useful alternative to avoid writing event handlers for every form input. But its example we will build in the form toe aren't a new list. We do this over in the board Dodgers components. And on this slide here, this is the new list import we see at the bottom left. So looking at this at the bottom of the bowl components after the list, rapid. If so, let's head over to that now into our project in visual studio code. Let's open up the board, doctor. Yes, And then if we go to the clothes and Dave for this list dropper, which is this one here, we can then create our form inside his former going toe. Aren't eight on submit event handler on submit isn't going to fire off a Christian Mefford , which is called this store. Create new list. If we scroll up to the top of this components, we already have create new list inside warm efforts so we can make use of this very soon. After this, we can also add a class name. But I was styling under Said this to new list. Rougher. Okay, so now after the former going to nest inside a form input, the input is going to have the type of text itself closes on new line. We can add the type of text since all we receive in and by the user is the text input for new list. We also need name. We can simply call this name and then a placeholder value to let the user know exactly what's type in not a plus symbol and then need text off new list. So he had Currently we have I was surrounded, Dev, followed by a form. And among just afterwards, as we already know, react one. Let's do this because it needs a parent elements. So that's on a device. A rapper. It's cause out the closing time in places just after our form. Okay, let's say this and then over to the browser and inside the Browns will have a new list form input and also this button which we have from earlier which is triggering the same method. So let's go down into our random effort. We cant remove this butternut from earlier since we now have our form input Then scroll up to our create new list method which will set the states since in this version, we're not using state to monitor form imports, we need a way to access the dom elements and then set them to this list object. So i e we need to grab the import which the user has entered and said this to our list. Object on react gives way to do this using refs, refs, airways access the dorm under Give us all the information we need, including the value entered into a form input. We can create a new rest with the create ref method but still this above create new lists we give our effort name. I went to call mine on board input Keep the descriptive name cassettes a ref would react Don't create ref on the rockets, Your stuff, the woods we can then pass it to import as a ref attribute. So let's grab on board imports, go down to the elements which wants the information from I'm gonna have this anywhere as an attribute, we can set the ref equal to this thought on board input. This will attach this reference to this hate mail import. We can access it above in arm effort to grab the properties, which we need up in create new list. We can also now pass in the event info with the variable number can access is to prevent the default behavior. So this will basically it stopped the page from reloading. When we submit the form, that's this. I'm going to comments out the cold and then console log the ref. Nice remove. This starts that states on also our list. In this you a console log with the value off our rough, which is this don't aren't board input. We don't need some cold on. So let's go over to the browser. You have an era inside of the board. So we got the right new list. I think you need to own Commons out this close embrace and there we go. So now inside of on your list without anything inside here, go to the console and then get the value off our ref, which points to our current input. Now there's a lot of information about the import Astrea, but the one we're particularly interested in is the current volume. So up in our comes a log we can narrow this down to dark currents don't bone you. This will give us the value entered by the user. It's time anything into this import. When I got a text which was being entered by the user back over to our board, we can now one comment out of this cold. Let's like all the lines being commented out, which is the list all the way down to that state. We can also remove the console log. Now we can use the ref value inside of our title instead of this hard coded value. We can do this by removing the string, and then instead we can point to this thought our board imports. And then, just as we've seen before in the console lawyer, we can grab the current value. So now I say this. Let's go over to the browser. Let's try anything inside here. New list, too. And now we're getting era. The reason for this is over in the list component insider Here we're looping through any available cards inside of old list. However, inside of this board, components will create a new list. We have no cards set up inside this object. Therefore, react could not find any values on causes Nera later on, if I based, these cars will be separate from the lists. So as a temporary measure, I'm going to add some simple cars when creating a new list. So just after a new days, we'll temporarily add in some cards, which is going to be Honore. This is going to be an array of objects. Is that a idea of war? Some tax se card, one separate by common looking at a second object with an idea of to un also some texts off cartu and also under calmer just after created us. Let's go with the Broza. I know if we are a new list, it's answer the new leases now that is inside the browser. Just before we wrap this up, there is a few small issues to fix. First of all, it would delete the contents from our form. Imports and hit. Enter. We'll see what can Now, Arden, Empty list. And also number two. The import doesn't clear after we are a new list. So he enter. I only want this funny you it to be then cleared for the next list. These are pretty simple things to fix. First we can add a its demons jacket. The title is president. Before we set a state, we can do this in that side of the board. Doctor. Yes. Let's look for our set state call which is just here on the line above weaken, creating if statements, Jack, if the list the title is present. If it is, we grab this starts at ST and then it moves its inside. This will end it Stop in empty list. Being added will contest this. If we get an answer on this new list, we see that no new list has been added. Next one is clear. The import After we submit a new list, we can do this over inside of the board doctor. Yes, Just after the starts at ST we can refresh or reset the value of all ref. So this thought on board input. We can set the current value just like we used before to be equal to an empty string. That's the sounds. Anything inside here and now Our new list import is no empty. So now this is working. We can get a little bit more practice in the next video by crazy in the new card form. 15. Create new card form: he formed to answer a new card is going to be similar to the last video. So we'll get a little bit more practice using refs UN also pushing to all states objects. This will be the new card import we see at the bottom of each off these free lists. I mean, we cannot it in the least components under these cards. So let's head over to the list, Doctor. Yes, Inside of the list components on underneath our card section. We can also add a new form. So just under our loop and also still within this surrounding Dave, we can Then on a form, the form is going to have a on submit method which is going to be equal to the value of this thought to create new cars. We can also add a class name. I said this to new car dropper. Are these onto the online? So it's more clear. Okay, so now inside of this former Congar ahead, and aren't I will warn and only import just like we did when adding a new list. The import is going to have the type of text closes off and on a new line, we can after the type After this, this is also going to have the name this is equal to name and finally a placeholder which just like the last video, is going to be a plus symbol in the knee text, all new card. This is only needs to for reform. This will also need a ref to someone great this at the top of old class. So just above I would render my phone. We can add our name Import onset is to react. Don't create ref willing to grant. But this is name import and aren't at least two or form inside the imports. As an attributes, we can answer the ref just like we've used before. I said this to the value off this thought name import Lincoln The value obviously import to all ref at the moment for simplicity over cards are contained inside of the lists in the sample data. So no, the board's lists and also the cards will also be independence. And then we link thes via i ds. We can't begin this process by idea de current card state inside of you too. So up at the top of its components, we can create our state's objects on the state is going to be responsible for storing at the current cards. At the moment, all this is the initial state, which is going to be said to an empty array and the process off. Creating a new card is very similar to the last video when we added a new list. Already to do is go below our ref. Outside of all random effort, American creates a new card. I remember this name most link up with the Mefford, which we added on Submit. So create new card is going to be a function which is going to take in the event info. What's that about? Watto. Function it just like this we can. Then it prevents the default behavior. Stop the browser from reloading, then create a card. We can solve this card inside of a constant and said this to an object. The card object is going to have the text the list i d, which is linked to an array off labels on also the days which it was created out. So first of all, the tax which is fall this card we could grab from our refs. This is stored inside of name inputs. I'm once again we can grab the value. We've doctrines don't find you separated with the comma, but can also link this to a list. I I didn't a list i d later on. In this course, this list I d will be automatically placed in followers. Both men are working out any value inside here. Next up, a card would also need an array of labels. So that said, it's to an initial empty array. Then also the created at which is going to be equal to a new jobs group dates below this object. We can also set the states, but just before we do, this will check if the card dot taxis presence which will stop any form imports from me submitted, which has no value. We can. Then it call these thoughts that state personal objects the states which you want set is the current cards. So we're going to do what we have done previously inside the states object. We're going to set the current cards by emerging in the Accordance State with the spread operator. So this starts states North Korean cards and separated by comma will also add in a when you card. The next thing to do after this is toe also reset our form input. So let's just add this onto the new lines with more clear. Okay, so then below this curly brace for the if statements, we can then reset the text input box by accessing the raft with name input. And then it's actually could have value to be equal to an empty street to check. This is work, and we can do a quick console log just after this with this ring off new car, that is that we can add on to the end the card, no text, both the browser, but now have our new card form imports at the end of each list. That's anything onto here. Then we got a new card. I did, and then test. Let's try this one. Now These are all working fine. I'm going to leave the cars as they often now, since we'll begin at riel card data from Firebase in a later section and then linking these cards to each list 16. Setting up React router: At moments in our project, we shown both the home on the ball components. We can see these difficult to the react developer tools inside of our up. We'll have this home section about the top here and then below what we are rendering the board components. This is because we currently have no way off switching between these. Ideally, though, what we want after logging in is to be taken to this home components where we can then select. Any of these boards would click on it, and then we're taking it to this board view. Basically, they need to be on different pages. To make this happen, we can install a router, which will that I was to show certain components on certain you RL's. So, for example, the girl off forward slash boards. We'll run throughout this board components. I always have a Ural for home. Unfortunately, though, React has no official rather package, but probably the most commonly used is the React Router Don Package, which is a Web version off the rotor. This is a mature package which is actively maintained. I'm looking a stolen base using MPM over to our project. Let's open up a new terminal and then inside here, going through an NPM I react routed, um, separated by the hyphens that said this off. There is different approaches we can take to set up our altar in the project, such as adding the rotor to a separate file and then important it into our main up. You can also add it toe in next R J s. But since we only have a few pages used to switch between, I'm going to set this up in our up dot Js. Let's head over to don't know and then about it off, the first thing we need to do is to import the packages which we need from the browser alter. These are named exports. Are these inside the cold braces you first need is the browser router, Capital B, and then capital, uh, separated by a comma. We also need to impose the wrong package Stanford. And finally, the switch. He's going to be imported from the router package, which is react routed, Dom. So, first of all, we have these browse around, sir, this is our actual router. Implementation will use it as a rapper for all off our routes. un uses the hatred or five history a p i. After this, we have the route. This will be used to render a component for a given. You are all but anyway have switch. This is a rapper for multiple routes. I will only ever render the first routes which matches. Let's give us a go on on this to the random effort by rough in the components with the router. So down to our render Mefford, where I'll put our home onboard surrounding these two components inside the Dev when I want to make use off the browse around her, which we just imported. So the opening saag and then Arthuis closing targ just after the board. We can then comment, sounds our board on our home components and then make use off the router to control these. I'm going to begin with the board route. The home round takes in props, so we'll come back to this very soon. Let's make use off our route import with a capital R. Is this self closing? And then inside we passed in the path which is going to be equal to forward slash board. So each time the user visits this round off forward slash board. We didn't want to run the out a component we cannot. The components on this one is going to be the board components on. This needs a cup. It'll be too much. Three components which were imported at the top of this file lockdowns all router. Another route, which we need, is a page not found to catch all of the other routes. Who don't our insider here? So just underneath all aboard, that's hard. A second route. We don't need to on a path this time because this will pick up all of the paths which you're not Dicle edible. Instead, all we need to do is to rent out a components. I'm going to add a components called Page not found and then closes off. These components has no you're being created. So go ahead and do is no inside of components and then pages. It's not a new file. This is a page not found dot Js. Its function will be pretty simple. Going to import react from react unanswered. This up as a function based components goals page no phones says that the function then inside of here we're going to add a div. This David is simply going to render out a level free heading with the tax off page not found. Okay, so now we need to export this function down at the very bottom with a export default. The component name off page not found. This will no allow us to import this in the app dot Js So about the top we can import Pedro founds on the file path, which is dot slash components. This is also in the pages folder and then the name off page not found. So let's give this a save now on gold to the browser. I hope some have a era 1000 balls, a router. So down online 20 free. Just about an hour inside of there, then off to the browser. So currently we're on the routes off 12 free slash boards. So now we get the page not found. Since this doesn't match any of the routes inside of here. If we now try forward slash board, we should now say this board component rendered outs change our u r l to be four slash board and I will see the board rendered out inside the browser. Okay, good. So just before we wrap up this video, I want to show you something which may cut you out when the first using the browser. Alter. If you go back over to the app dot Js. So, first of all, if we comment, sounds the page not found. And then we are one more round just above here Those off American on a path which is going to be for the home rounds off forwards. Nash. So inside here we can rent out any components. That's simply go for the page not found. If we say this final now and go over to the browser and they never get to you forward slash board, we see both. The board is rendered out on also the page not found components, even though we're much in a u r l off false dashboard. So this may look a little strange because currently, on the folds like bald routes, we only want to render out the components off board. The reason this is happening is because, technically, the home forward slash is also much for you to If we look at forward slash board, it's also begins with a forward slash. So we have a partial much at the beginning off the girl. This is enough to render the home component to. And if we don't want this type of behavior, we can also an exact to the route which will avoid this. So inside of all routes weaken aren't exact. Save this and not one forward slash board. We only see the board component since using exact will not allow any partial. Much is so I'm just going to reinstate about up my own coming sounds Page not found. But this is something to watch out for when using the router. Next, we're going to move on to looking at how we can reintroduce the home components and also how we can pass down props using the router. 17. Passing props to a router component: this app dot Js file used to rent out of a home components on also the board in the last video when we switched to the router, we only rented out the board components, leaving his home components until this video. This is because this home components also makes use of props. We passed on the boards on also the create newborn method. Now, when passing props using the router, the first instinct would be maybe to do something like this. If we had our home routes, we could pass in a component go home. We could then also passed down the props just like we have commented out below, such as the boards that is over and also create new board leave no components to mirror what we had earlier. However, though, if we were to save this and then go over to our when it's go over to the forward slash, which is the home components, when I see we get a error message in the console and also in the browser. We receiving these errors because the home component is not receiving the props which it needs. Therefore, react is receiving this undefined or null value when using the reactor out, we could not passed on props in the traditional way. The solution is to pass in a runner prop in the place off our components the stop. By removing our props and also this home components and then in place, we can answer in a render prop inside. Here, this takes in a function so pass in a narrow function just like this. And here we can then aren't our home components with al props. They're just like we have earlier. Down here we have the home components. Which one is out? Our two boards. We can in fact copy the section and at this inside off this function. In fact, I just need a home and not this board. Let's remove this. So first of all, let's save this file and check this out. We now see the home component rendering out deep all previews. So this now it removes our error. We also see this page not found components. Since it doesn't have a path, it will always render with our current rotor layout to fix this weaken, surround our routes with a switch, statements So inside the browse around her, we can make use off this switch package, which we imported earlier on just off the browser router. We can pass this in 1000 opening Underclothes and tog, which sits just inside off our browse around her on what's which will do is to look at our components and then only run to the 1st 1 which matches. So if a forward slash or a four slash board is found, the correspondent components will be rendered just like when using a regular job scripts, which statements, if non or a march. We then left with the page not found down in the bottom. Let's say this and check that the patient found components is removed. Now we just have the home components. As expected, it's no lasers with the behavior, which would expect under this is how we're going past down props using the React shelter next week on to continue looking at this router on how we can pass parameters via the URL 18. URL parameters: using that react route so we can also pass parameters by the u. R L two over pages. Promises are a section off the URL which can change. For example, if we have a user which is logged in another use ideas such as using born. We could then aren't forward slash borns, and this would just play all the boards for user one. This used one section is dynamic, meaning it will change depending on which user is logged in. Also the same. If we were to have various boards, we could also have a board and then forward slash with the board i d to chance 100 hours, meaning that the 100 section would be dynamic stored inside a variable and then available for us to use with react router. Let's go over to our togs and see how we can implement this. So at the moments we have the forward slash, which is rendering out our home components later on, it is cost this forward slash routes will be used to render a logging component. So using these two logging before seeing their own boats. Therefore, this no means this home component, which displays the uses. Boards will need to be at around such as this, so use the born. But now we can see the available boards for that logged in user. Now it's not practical to add a different route with a different path for every user, which is locked in in our website. So instead, what we can do is at a cold on the art, a dynamic section followed by a name which wants aren't to this variable. That's called the Use I D. And now if you go over to the browser, I want to have one to free those bones. This will now render out the home components and then install a value of 12 free inside off this use I D. Because this section is dynamic, it will still render out this home components regardless of what value is placed inside of here. If we open up the react developer tools, let's kick on this tub and then search for the home components, which we call interviewing. Would you see the props over on the right inside with the boards on? Also they create new ball function. There is currently no reference to this use I D to see this. We needs passed on the rotors data as a prop to we could do this inside off the render prop inside. Here we're going to pass in the props was available to the function and then inside of our home components. That's obvious onto a separate line. We can also spread in the props, and this will then emerge in the rotors data with the rest of the props, which will pass to the home components back over to the deaf tools. Let's reload Go into react on search for the home components. It's like this. And now, alongside the boards on Create New Board, we have free new props. This is the history location on much props, which is all passed from the react router. We will look at these in more detail as we go through the rest of the course, but for now we confined the parameters or these u R L parameters inside off the props on the march and then down to prom's. Therefore, half this use I D. Variable with the value off 456 which is grabbed from this section here later will use this use idea to fetch the boards for the current logged in user. So for now we can simply output to the user in the home Doctor s file, Let's head over to the home on just above our courageous, bold form, I'm going to output a spon on to display the user. I d. We do this just as we would with any over props we can access, they start props. Not much, which is these props which would have just here. So we need not march Dr Arms and then the use i d. So let's give us to save and then go over to the browser. We now have the variable off 456 Let's try a different value inside here, so use a one. And now this problems is displayed inside the browser. We can also do this for all boards. If we go back to update us and his girl down to our board components, we can now aren't in the board i d so forward slash you say dynamic sections on easy colon people that I d. This will no allow us to go into the URL and then on the board and forward slash a board I D, such as one. Whatever dynamic data would pass in for the board, I d will still run. Doubt this board components, and then the board idea will be stored inside of this variable. Since we also needs passed down, the relatives props in his component to We can't replace the components with the render function. So it's on these onto the online. We can remove the components and then replaces. Where did he render this? Takes in a function which we're going to pass in the rafters props inside here. We then render out our board components on a separate line. We can also spread in the props, which is the ones provided by the router, and then close off our ball components. Let's test this is working over in the browser, so have a forward slash warn. That's fry five. Thousands on for each number with your person was still city board component rendered it to the screen that search inside of the deaf tools for the board. We still have the props off history location of March so we can grab the promise insider here with this not working, we've taken another step towards structure which we need for the final project. Kourtney, though, were just typing in these you RL's. But in the next video, we'll look at how we can navigate to these routes when a user clicks on a ball preview and also how we can access the reactor out of features when it's not possible to pass down props. 19. Using withRouter and push: rather than typing in our dynamic you RL's, which we don't in the last video, we instead, they need a way to push them via our if we go over to our project in local host in its 1st 412 free both slash bones. We have our free boards here from the sample data. It would be good to be able to click on any of these a number taken into the ball components with the board I d. As part off the girl. To do this, we can use the React router to navigate to a particular girl. I'm You could do this using the push method. While we are on this page, we can go to the reactive tools and open off the history object inside of the home components. Let's go down to the history inside of props if we open this up inside. Here is where this push method is located. This push Mefford will add a new entry onto the browser's history, stark meaning you can use the browsers back and forth for turn, and then this page will be stored into history. These three boards, of course, house and garden ideas located inside of the board preview components. This will leave us with a small issue if you go to the deaf tools. I found it. Search for the board preview. It was like any of these board previews. The only props what you have is the actual board. We don't have access to the history object where push is located. You may think he weaken just passed down the props like we did with the over components on . The answer is no or not directly. This poor preview is a child off the home components. Therefore, it's not directly rendered by the router inside of the app dot Js, The only components which are child components off the router is this home components and also the board The way around this is to use a package called with Router. We've rotor is a higher order components which will wrap our board preview. Therefore person in the same March location on history, props on with router is also available in this same react rolls a package which you already have installed. Let's go over to the board preview on. We can import this at the top of the file. This is a named Export Sony. It's usually curly braces. We have router. This is from the same package which is react. Routed. Um, Anamika. Replace the contents inside off the Renda Mefford. So rather than just don't put in the stock props that board that title. But I'm going to display a another list and then each item inside here is going to be a list item. Each item is the board, so therefore, we can then output this. No props the board don't title. Let's say this UN Take a look in the home components. We still have our free boards displaying here. Let's add a little bit styling inside off our own order list. First, we'll look in on a class name to trigger the CSS. This is bored preview item. On the next time I'm going to add a on click event handler, which is going to forget a Mefford called Goethe Board. Next up, we're going to add a in line style, which is going to set up the background color off each one. These ball previews. This will reflect the background color, which was set when we create a new board. We can do this with a in line it CSS property called background color. Since this is John was grips, we need to use the camel case background color rather than using the dash on little case values, as we would with regular CSS. We're going to set his background color equal to this. No props. I got bored the backgrounds. So now, above this, we can create our go to board method outside off the random effort. Let's go just after aboard preview class, we can create, go to board, sets up our function. So first for we're going to grab the board i d. Which we currently have inside of props. If we go to deport preview inside of the death tools inside of the props, we have all the born information which we need so first described, the board I d install this inside of a constant. The board idea is going to be equal to the stock props. The board thought I d. The second part of this is then used. The react router push referred to send us to a different tomorrow. So what want to do is click on any of these links. Then we want to be taken to a new U R L so bored and then forwards Nash the board i d. Which would have stored inside off this variable. Let's do this now. Nay style props. You're history. Access the push. Mefford. This is going to take in an object where we can specify the puff name. Since his path name will use this board i d. Variable. We need to use the back ticks to construct this. First of all, we can navigate to forward slash board and then forward slash. We can use the template syntax of the dollar symbol, the curly braces and then pass in the board i d. If we know, say this file and then go over to a home components when I have the free list items for boards, which is also getting the background color from the stop props the board the background. Now let's click on one of these on it, see if the push method will work. I'll see a message off. Cannot read property, push off undefined. This is not working because, as we mentioned earlier the package which we are importing at the top of the file, which is called with rata. Well, no need to be a rapper for this component. We can do this pretty easily if we go down to our export anaemic, unwrap our board preview components with Router. And then inside he will come passing l bowl preview, save this file and then a strike this out over in the browser. We can click on any of these boards and then we taking it to the board components. So this is board number two thousands. Let's go back and try course ideas. This is now boarding over one thousands and also the same for the garden ideas later on. In the course, when we get to using fire base, we will use this board I d to get the unique board data rather than at this hard go diversion which you see here if another. All this is a step in the right direction. The next pope will take a look at how Okun passed state using react shelter 20. Passing state via router: we already know how to pass down states when rendering, I'll say components using the router just like we did with this home components well past the boards, on also the Create new board function. Also in the board preview, we have navigated to a different route using the push method. Using this push my food. We also sometimes have the need to pass down state to to our new Tomorrow ought to the component, which is rendering when we go over to the browser and then go back actual home section. If you click on any board which you want to view, it would be a good idea to also passed the data to the ball component. So chancy board title on also the background color over in the board preview. Weaken at state or data just after the path name. We can also set up a state object on. Inside the hell can pass down all board information. So first of all, I'm going to pass the title. This poor preview has access to all of the board information, which is passed from the home components. Let's take a look at this board Preview isn't receiving the board as a prop. Therefore, we can access this with the stock props the board. We can access the title. We can also pass down the background to in the exact same way this is going to be. This stock props the board backgrounds no control yourselves over in the browser, save this file and then go back. Sobule previews click on any of these, and then we can use the React developer tools. We can search for the balls, which is the current component. So, like this and now inside of the props, we can also make use off this location prop, which is being passed down via the router. If we open this up, we now have a state object living inside here. Let's drop this down. I know how the background on also the title available to this board. The title is board was course ideas. So let's go back on. Also check the house ideas like the board location, state and now have the House ideas as the title and also deepak wrong color. So now we know where our data lives in its components. We can no uses over in the board. Let's go to the board doctor s components. First, we can set up the background color of the board. We can add this to the Open and Dave inside of all random Efford. So let's aren't at least to a new line. We can first on a class name link this to the CSS. It's going to be bored rougher and then it just like we did with the bull preview. We can also set up our styles, which is going to set the background color using couple case which wouldn't grab from the stop props the location, not state don't backgrounds and the shoes you spelled correctly. So before we go any further and ardently title, we can now see the blue has appeared inside the browser. Go back, check out the yellow course ideas. I went to the same also, if all the God 90 is too personally background color to all aboard, just below is we can also on a board title on also ate Elite Board Button which we can use later So cooperative for the board rapper. We have the deal with the class name off list dropper. Let's go above this. We can set up a new Dev which is going to be for the board header. I double crossed name Ford hyphen header inside here. Let's on a level free head in, which is going to be for the title. We can grab the ball title using the store props, no location, no states, and then the title just after this will also add a button which is going to be used later on in the course to delete the board. We won't have any click handlers onto here just yet. Instead, we understand it. The text off the leaderboard. Now we can say this on Go off the browser. We have a word elite board button in the corner, un also our board title. That's just try to have ones too. We have course ideas on also the house ideas too. So now our background color and also aboard title has been passed to this poor component using the state object via the reactor Alter on this is all know working. So I will see, you know in the next section well, we'll get to work using fire base 21. Setting up Firebase: his project, We're going to be using fire base as the back end. This will almost aren't a database to store all of all boards, lists and counts. Also, it will allow us to only get back the board's listing cars we need for the currently logged in user. We consort them by the creation dates. It will give us real time updates a state of changes on so much more. Also, we can use fire base for user authentication, signing up on logging in have a great feature off fire bases that it could be used not only for Web projects Boots, also for our US on droid two so we can share the same data across multiple ups. We get started over art firebase dot google dot com, and you need to its sign up with a Google accounts if you have not uses before, So if you need to go ahead and sign up now, I'm currently signed in someone's click on Go to Console. Before we go any further, the fire base seems to change his website layout un designed pretty regularly what the steps are usually similar, so if it looks a little different when you visit, you should still be able to work things out. Since there are only a few steps to take. The first thing we need to do is to create a project by clicking on our project. I would have a project called React Fellow, so instead I'm going to call this react fellow, too. We also need to accept the terms and conditions before can create our project. Thank you. This a few moments to create. We're going to be using the latest fire based database, which is called the Cloud by Store, which will give us our real time functionality real time, meaning our up can be updated with changes as they happen. And our data can be kept in sync across different devices rather than us having to make a new request after each change. Once it's dumb and click on Continue, and they were taken to the home page for all projects. So no need to click on the cloud for your store, which we can get from clicking on this Qualify Store section Just here, or I can click on the database from the menu. Send things up is pretty simple when you click on create a database. We're going to start in the test mode just for now, meaning that all users can read and write to our database. But we will add security rules later on. Click on. Next. We can end select our region, which is closest to ours. So choose any of these and then click under. So this is our database on page on. This is where old data will display once we push it to five days. We can also manually add collections to using this link. Here. The collection is a group of data, which will be our boards, our lists on our cards, then the state's baseball project. We need to first get our firebase settings. We can do this over in the side bar and then click on Project Overview. We're going to be using the Web version. So click on this. We need to give our application a nickname. I want to also call this react fellow, too. Then register our up. This will give us access to our config settings, which we need to add it to our project. We need to copy all of the settings from inside the conflict object, so basically everything inside of these curly braces. So copy all of these lines of code. Then we can take these over to visual studio cold. Let's create a new file. Open the sidebar inside of sauce. New file. Honestly, Going to be called by a base dot Js. The next step is to install funny base from MPM, so go down to the terminal press command or control. See if you need tooth closed on server Nim can ruin a command called MPM life install, and then the package is simply called fire base. So if we go back in 12 fire based on Js file, we can now do a import pulling our fire base package on stories inside a variable so important this from the norm modules. This package will because fire base and then we're going to do forward slash Up ford slash Up is the core fire based plans which is required when using fire base. The next step is to also import the fire style package. We don't need started inside a valuable, so we can just do a import. We don't stolen this into a name so we can import of the fire base package and then forwards Nash Fire Star. This will make the fire style functionality available in our project when ex cons creates a constant called config configures going to hold all of the options which was copied from fire base. Silken pace. He's inside here, it's called sidebars. Have got a little bit more space and they look so I Mr No, off the end of fellow. But it doesn't matter. Let's go down and now initialize our up. We can do this by selecting our firebase variable, which we imported at the top number can do a method called initialized up Demagogues pass in our conflict object without settings from fire base. With this configuration now taken care off, I'm not going to set up free constants. These will point to our database collections, which is going to be boards, lists and cards. This is just basically a short court, which we're going to use for us our project, rather than having a lot of repetitive cold, which will point to the location in our database. The first vote going to create a constant called DB, and it's going to be equal to fire base. Don't fire store and again This is also a short cut. So this is a point of two are fire based database. And now I could just type DB instead of firebase dot fire star below this when I want to create a reference to each collection we need. This will allow us to access these no project to save and retrieve data just by using the variable name. So first formal create a board raft and it's going to be equal to our database, which is DB never going to access a collection What you don't have yet, but this will have the name off boards. What? I'm going to copy and paste this into more times. The 2nd 1 is going to be a reference to our lists. So the collection name is going to be lists and then the 3rd 1 is going to be a pointer to other cards. So all this means now is in our project. When we want to push a board to firebase all retrieve aboard from fire base. We just needs type the word board draft rather than having to type out fire base. Don't fire store your collection dot boards. So now we can export these references so we can access them in the files. Could do this. We didn't named export. Inside the curly braces, we can export our boards. Raft our list Draft on also the cards, ref to we can now say this file and test it working over in at the app dot Js We could begin with our boards rough by important this out of the top of the file just before class , we can create a import. Well, first of all, imports our boards rough on. This is from all firebase file, which is ring off dot slash and then fire base. This was a named exports, so can import each one inside of these curly braces. We cannot a quick test in the component Did mounts check. This is working. So just under our set state, we could no access this boards ref edible, and then call a method called dot Odd, which is a firebase methods to add new data to this collection. We're simply going to create a object with a name and a value off. Hello? Let's say this. And now if we go through a project and then we load, we have an error off boards, ref. So let's check this out. We have the import looks correct over the firebase on this needs an s. But the project relatedness will now what caused the component didn't mount to run. So if you go to fire base on, we can close this down. Go to console. Annan told database when I see we have a board collection with a single documents. This is the documents I d. Then we have the name off. Hello. So one of the benefits off using fire base is we don't need to define our collections before hunt. We can simply push a new object or new item to fire base on. You will also create the necessary collection on documents. So this is just a test, so I'm going to delete this. Now let's go into a boards to be the collection. We also needs time to the boards name. We could remove this and then remove the cold from component ID mounts inside of the app. Doctor. Yes. Remove this line of cold, say this file. And now this leaves those with fire base all now set up only good to now. Move on to the next video 22. Pushing data to Firebase: we know how fi based set up. And we know our connection is now working so we can move on to creating all methods in react to them. Push data to fire base Starting in this up, Doctor. Yes, he We already have a method set up to create a new board so we can now use the firebase ad referred to push your new board data to our database. So let's begin inside all this method just before setting state when creating new constants , which is going to be called the new board. We're gonna set this equal to I would bowl draft, which we imported at the top of the file in the last video, which will point to our collection off boards. Well, I'm going to use the ad Mefford. So then push a object, which is going to be old board, which is passed to this method as a parameter. Why? Based records will automatically get an I d generated. So before saving our new border states, we can construct a new object where we grew up. This I d and then added to the rest of the board. Let's do this just above our set state coal we can create a constant which is going to be called the board object. And he all want to do is to grab the existing board data on also merging a i. D. The first of all, let's set a I D property, which is going to be equal to our new board constant. And then I d remember New board will refer to the data which would return back from Firebase Woman. Art is new board, so therefore, it will also have the fire base I d. Property. We can also add a calmer and then use the spread operator to add in the rest of the board. So no one was set in the States. We instead it wants Aren't this new board object? Next, we can add some era handle in its in its method, using a sinker weight, sinker weight will almost to wait for the board to defer saved to firebase before moving on to the next line of code. We want to make sure the board is for saved because we need to access this generated I d before we then save it to state. So first of all, we can set this function it to be asynchronous my identity, a sink keyword. This will allow us to add a weight into our method. So the data which you want to away coming back is this new board from fire base. We can then and some air 100 and using try and catch. First of all, let's write this cold inside of a tribe block. Open up the curly braces. We're going to close this off just after we set the state at an extra curly brace right at the end. So if you're not used to try and catch before, the trying section is the code, which we first need to try to run. If the cold, which is run, is successful. All these goods, if there is an error when running this cold in the try block, weaken and it catches era using a catch block. So just after his curly brace, we can also add a catch block, which is going to take in the error as a variable open and close the curly braces. We can then do a consul error what you're going to. I'll put a string off error creating new board, but a cold on, then after this, we can also add a comma. Then we can also display this error, which is passed in to catch. Give this to save and then we can go over to our boards and we can try this out. So it's the browser into our projects and we still have a board. Rafia. Let's go up listening to the boards. It's now over to our home components where we need to add in a user. Let's go for 12 free and then forward slash boards. Let's try this, I'll by pushing a new item into fire base. Let's go for a test board, tickle of green, then create a new board. This born is an immediately undid since it pushed it to states. Another order. No state will trigger an update in, or components, which uses data. If we now refresh this, the data will be lost since we get in these boards from states rather than from fire base. But we could go over to the fire base console and check this is being saved. Reload! The console on our test board is now. It saved inside of here, as we mentioned before, flying based on a unique I d. Let's go over to the developer tools. You can also check that this is being added to our state. So that's on test. Too great. A new board look. Analyses Estate has been updated to include four items in the rain. So click on this. If we click on the last one, we now see this unique I d. Has been added to our objects. This should be the same I d. Which is being provided inside a firebase. If reloads and click on this, this is our test to with the same I D, which we now have in state. Let's not do the same over in the board's doctor. Yes, we can push our new lists to Fire Base to so head over to our ball components. Then, when it's look for a method called create New list, this is woman addressed here. So the first thing I'm going to do is to mark this function as a sing so we can use a weight number. Conard. It's Amero handling by adding a try block opening, closing curly braces. We couldn't remove this curly brace and then at it down at the ends So just after we set our ref back to an empty string, we can understand Aunt a catch block which passes in a error open and close. The curly braces never capacity a console error with string, which is going to be error creating a new list person in the era. So with this error handling now taken care off, but only to make some changes to our least object Herbal. So let's scroll up. You have a list object which were created earlier. The first step isn't I will remove this I d. Since we're going to be hardiness via fire base, we can also remove this con Serey. Since you no longer need this data, let's remove this. We will be identity cards as a separate collection inside a fire base and then linking them together via the I DS. So now we should just left with the title The board on also the created US This list also needs to be linked to the crew on board so we can change the ball property to do this rather than having a hard coded value. We can all set this to be the store Props don't match No problems. The board i d. If we go all 12 board, remember, this is the data which we getting passed from the react router. We can see this over in the developer tools. If we click on any of these, she was aboard. Then we have the props passed by the router inside a much the Brahms. We have this board I d. Therefore, this you're going to link the card which is being created with equal on board this will I was later on in the course to then pulling all of the lists from fire Base for the current board, which we have you in below. This we have a statement. We can also make sure that the board I d is also president before we say this to fire base . So can also on the list boned because we don't want to save a list which has no relationship to a board. No. Instead, off saving this list of states, we're not going to push this to fire base. Since we now dealing with the lists rather than boards, we need to import the list reference from all five based file. We can do this by important the lists Rough Rome or Firebase File, which is located in dot, dot, slash and then the final name off base, then looking ardour new list to firebase instead of using the set state that's remove this line. Then instead, we conard await into markets function as asynchronous we can access released draft. We can only use the arts. Mefford, too, aren't a new objects. This new object is the list which was created above. Now let's say this. I'm a contest this out over in the browser make you inside off one of the bonds, and then we could now go and create a new list. So click on this. So course list one, of course, at least two over to the fire base console after reloads and I'll see old lists objects or will his collection has now being created. We have our two lists, so the 1st 1 is linked to board 1000. He's a second mourn, and we can see inside of our project in the URL that this is the board I d. Let's just go over to house ideas on the other new lease to house list, warn and check this inside of the console. Just make sure this has the i. D. Off 2000. Does that go? The last thing we need to do in this video is to create a new card. New cars are created in the parents list components. This will follow a similar pattern to what we've just done. So there shouldn't be any surprises over to the list dot Js. We can first set of the create new card Mefford to be a sink. We can then wrap our code in the try block, take off the clothes embrace and then we can add this down at the bottom just after I become so Look also, I didn't in the catch section, which you're going to take in any errors which you created. And then it generates a consul dot error with the string off Eric creating new cards at the colon and then passing our era. The only change to our card is to set the list I d. And we can grab this from the list props which passed down So rather than it's hard coded value off, ABC want to free. We don't have these from our props, which you said via the list dot i d. So here we're creating a new card, and then we're also creating a reference to the list, which is belongs to If we go over to the list components in our project in the reactive tools search for any list looking at it, see this list, which is passed as props here we grabbing the list i D, which is 100 in this case, the 2nd 1 as a list I d off 300 so on. The next step is to import of a cards rough from our fire base file. Inside the curly braces, grab the cards raft. The file path is also dot, dot, slash fire base and then it just like we did with the list before. We can also go down to the if statement before push this to state. And then we can also add on to the end a second check, which is also going to check if the card not list i d. He's also presents, since this is required before saving to state or to fire base. The next step is to also remove this set state method, and instead we're going to await cards ref don't odd. So in Addis to fire base, the object which wants odd is this card, which we just constructed above so possible cards. So this file and then we contestants in the browser were contested by adding a new card into multiple lists. Let's say house card one. I was caught too. And it is fully travel ideas. Double card wound. Look, at least card one. What was the fire base? And then refresh console sizeable cards. The 1st 1 is associated with the least 200. The 2nd 1 is one hundreds, 100 on also free hundreds. So everything is working fine. We also have the correct text for each one. We have a created updates which is being generated using jobless trips. We don't have any labels just yet, but we'll come back to this later on in the course. No, have the fire base data to work with. In the next video, we're going to remove the sample data from our project un instead, read the data from fire base 23. Reading data from Firebase: the sample data which we imported earlier, is no longer needed in our project, so I can now begin to remove it on work from our days base. We could do this over in the app dot Js. First of all, we can remove the import, so import data Let's remove this line and then down below. We have a component did mount, which sets the states using it. This sample data let's remove this line too. In place of this, I'm going to create a method which will get all boards from fire base, but only when we actually need them. Just below this component ID mounts once create a new Mefford called get boards. Is he going to be a sink function which is going to take in the user i d, which is going to pass to it? It sets about arrow function. Great. A try section on also a catch which takes in the era. Let's just do a console log with the other message off error getting boards and also passed in the air. A message just after this. So the first thing I want to do when I get in at the new boards from fire base is to set the state to be empty. So inside the try block, we can do with this not set state and then inside of here, United States object, which is going to set the boards to be an empty array. This will just ensure that any previous board in states will be removed before make a new cult. If I base about the top, we already have our board reference imported from fire base. So you can now use this to get the contents off the boards collection. We can do this by calling the guest method just below these that states we consent to obey constant with the name of boards. And then we're gonna wait our data back my grubbing old boards reference, and then it calling the doors get method. This will get the contents of our board collection only once. It won't listen for any changes, but we'll look at how to do this later in the course. The board's constant, which we have just here, holds all of our boards. I mean, you can then lived through them, get each one and then say these to our state by baseball and I was to do this by using a for each method I'm looking. Do this just below this line we can select aboard Constance we can live through with for each inside here. We're going to store each item inside of all boards into a variable called board inside of this function body. We can begin by doing a console log and then log. We value off all board. So before we say this estate, we're going to do a console log. Since it can be a little confusing without seeing what comes back from five days, the ruinous weaken temporarily as this method above. When the component mounts inside, he wouldn't call it with the store. Get boards. Okay, so once this is done, we can open up the terminal, make sure that he server has started with an M. P M start. Let's kick this off. We can then go over to the project and then if we right, click and then inspect openess up in the console and let's do a refresh. So inside the console we see what's called a query document Snapshots, which is a snapshot of the documents were reading from firebase at that particular time. If we open this up, it does contain the board I d which we can see here. We do need to grab this, but if we only want the actual document data rather in all of this metadata which we see here along with the fire based references, we can change our console log to call the data Mefford which will extract all the fields as an object down in our council log. We can also add to the daughter data Mefford onto the ends also on the brackets. To call this as a Mefford, We now see our four bold objects. We can open us up. We can open up the boards and I will see the properties off background created art title on also the user. This is start in a board object which you can see just to you, with the curly braces so broken drill down further by adding a dartboard onto the end of our council log. Let's go over now and then on the end of data were conard dot board access. The individual objects reloads a number taken straight into object. So this is the exact date that we need the only missing field is the i d. Which we mentioned before. But we can grab this directly from the board. Now we install this data inside off a constant off in the AARP dot Js So rather than at this come so long, we can now all remove this well says obey Constant called data, which is going to be equal to board, not data the board, which we're seeing in the console log American create eight new board object. Take this board data and then mix it in with the missing I d. On the next time a great a second constant, which is for the board objects said about objects Russell work in that mix in the i d. We can grab this directly from board dot i d number can spread in with the three dots. The data, which is this constant from just above just after this object we can now set of the States with this starts that state inside here. We're going to target the balls object gonna set this to an array. So going to take a copy off the existence state with this No state the bones separated by a common look and then guardian our new board object. So this file, the number contest is over in the browser, So this is a good start. We see the board being pulled in from fire base. Let's aren't a new object or any board object. Let's go to the React. Developer Tools Search for home components We have all boards as props. When you see the array with our for newborns, let's try and only more more go fall to do the color orange great new boards and now have an extra object pushed us state on. This is constructed in the same way as all the rest with mixed in the i d with all of the rest of the board data. So currently we I did this call to get aboard from fire base Inside off the component did mount. We only want to grab these boards when the home component loads rather natural up, since this is where they're going to be displayed. All we need to do for this is to move the component. Did Mum cold to the home components? Let's cut the component in Mount Section. We no longer need this and then go over to our home components Number 10 paces in right at the very top just above our render Meffert. Since we know access in it, this gets boards Mefford, which is in the up dot Js We need snow posses down as April Let's roll down to a router and then inside of the home ling which is this one just here. You can also add a prop cold guest boards which is going to be equal to all method off this dot Get boards say this file and now over to our component did mount inside a home dot Js we know needs access is via props. So this is this No problem. So get bored and then add this to our problem validation down on the bottom. So get boards is going to be our prototypes on. This is a function which is also required to how to come at the ends. American, I would say this and go over to the browser inside here. The boards are still showing in the browser, but they're now only loaded when we have you in it. This home components. If we go ahead and click on any of these, we still see our sample data insider here I will fix is in the next video. When we created at the link to this board earlier, we also passed this board I d buy at the U. R L parameters. We can now use this board I d to fetch the current loaded board Details from Fire Base rather than from our sample data. This will be stored into local states. I e. Inside of this components, I will be used to display the board title and also the background color rather than using the sample data which we see Now, let's do this. Now. This is the board components to go over to the board dot Js open the very top were important in the list rough. So we also need to ground the reference to the ball too. We're going to be loading up the current board so we can also add to this the state. So this is equal on board. We could set this up initially as an empty object and then now below, we can also set up a custom Mefford just below components did mounts, which is going to get a work crew on board from fire base. Let's call this method the gets bored. This is going to be a think and it's also going to take in the board I d. So we only get this single board from fire Base. We can set up our method at a try section, also a cut section below, which is going to take in the era. This is going to send out with a console log with the message off error getting boards on, also passing in the era. So the first thing to do in the tri section appear It's great, a constant which is going to store our single board. We're gonna wait this information back from fire base. This is in the ball draft. We want to use the document reference, which is going to be the single board I D. Which is going to past in. Women call this so passing this never can call it the thought get method to grab all the contents from all bold. Once we have aboard, we can now say this estate with this starts that states states which you want updates is this couldn't board, which would have just here. Setting is equal to the value of our constant on It's also needs to be bold draft. So make this change so we don't want to set the state just like this. Make sure this is balls to just about itself. So clearly we set in this board object in two states, but we don't want to do it just like we see here. Remember earlier women got all of the boards over in the app dot Js If we go up to get boards Mefford. When we added a console log, we're seeing that we got back a query snapshots. This is the same here so I can access the board object in the exact same ways this by Colin need dot data Mefford and then access innately bored object. Let's do this. No, we already have this board. We can call dot data, then access the board object just like this. This board data needs to be available immediately so we can call it from components. Did mounts person in the Kuerten's board i d. That's gold up inside of components did mount. We can now call get bored inside here by using this dog aboard and then we need to pass in the I D, which is received inside of this method. So to grant the Korans I d. We know this is stored inside of the U R L parameters which you can see open the top here. I'm already know how to access the router parameters. We can do this. We do this dot crops the prop name off March, which is from the router going to access the programs and then the parameter name, which in this case is called the Board I d. Save this file and now over to the board inside the browser. So as soon as this board component will loads, let's go to the reactive tools and check. We have the data which we need as to a search for the board components. So, like this inside the state, we have the current board. That's open this up, and I will see all the data which we need, such as the background color on the title. So we can now use this in our random effort inside of the board, decide the title and also the background. Let's go down to the random effort. And then the first thing to do is to set up the background color rather than using the relative props. Let's remove this, and then instead, we can use the data, which is stored in states. So the store states daughter Corrine board. Then we can access the background property just below inside the level free heading. We can access the start states don't go on board a nanogram p title check. This is still working over in the browser load of the ball components, and we still see the title on the background color when we go into each one of these boards . But it's no working. We can go over to the board preview components on. Also, remove the state, which is passed down by the router. So this is no longer needed it so we can remove these states objects on leaving just a puff name for the redirect, and this is still not working okay inside the browser. So you may have noticed that this was all working completely fine before we had to the background color on the title passed by the rotor. So you may be wondering why changes at all? The reason is for updating the components. Before we passed the I D on background to the ball components. This man's that want seaboard was loaded, were then still quitted This exact data, however, when fetching aboard data from firebase um storing it into state. This will mean that later on when we updated the board such as the title, any changes will then be dynamic on also, update the component to so with this no in place, let's now move on to the next video. 24. The where & orderBy methods: with what we learned in the last video, we can now apply this again to retrieve the lists on cards from fire Base. We also going to be taking a look at two new fire based methods. One is called Order by honest will source our data, which we get back no anywhere. Mefford will. I was to only get a list or card if the board I the much is the current board reviewing. So let's start over into the board components, so the board dot Js we can start up at the top by removing the sample data. We no longer need this import. Therefore, we can also remove the set state call which will apply this to state. It's no if we go over to the browser on the ball of you. It's no surprise we don't see any lists or cards in this component. So that's replace our sample data with a Mefford called get lists of in the ball components . This is going to get a list from fire base just like the gets bored method below. So this one is called get lists and this is going to be equal to a a sing function, which is also going to take in at the board. I d set up the arrow function. Then inside here we can create. I would try on also our catch block catch block takes in an error, as always. And then we can do a console log with the string off error perfectionists. And then afterwards I'm going to add a comma and then also ill put the era. Okay, so just above, in this trying section, weaken first, create our constant, which is going to hold our lists. We're going to await our Willis going back, which we can grab from the list ref. So we could now chain onto the end the dot get method which will use previously. But this would go ahead and grab all lists in our database instead. We don't need to get the list for this crew on board over in fire base. If we go back to the browser and then into the console, remember, Early woman created a new list on the new card. We also added a I d. So this list, for example, has a board I d often thousands. And then this will link to a individual board, which it was created on. So fire base allows us to do this using the where method. Let's take a look at how we can do this. So just after our list draft, we can train on the end, the wear Mefford and then inside here, this takes in free parameters. The first parameter, which we add in, is the field name. So the field name is going to be equal to list aboard since we are looking at the list object and then we want to select the board property. So inside here as the stream we capacity in list no board. The second promises is the comparison he we can use less on greater than or equals just like we can. With JavaScript so separated by a comma as a string, we can add that the double equals to compare this board reference with the Board I D, which is passed in to all function as a parameter. So now this will only grab our lists from our collection where the board field, who much the currents loaded board i d. This list also has a created outfield. If we take a look in the console, this is he created outfield just here on this. Come used to order our data by the date from when it was created. And I have a spelling mistake here, but that's not a problem. Since we can delete these and then creates a new list later on, let's take a look at how we can use created out inside of here. So we need to do is just after where is we can also change on to the end The order by Mefford then inside here as a string with compassion our list object and then the field name off created at Okay, so this will sort all list into ascending order using Nique rated outfield. You can also use any over field here too if he wanted half the order reversed. You can also add a second argument off descendant with you shortened to D E S C. I don't want to remove this and keep it as default and we have a road down the terminal. So this just needs to be bored. I d just like with past in a 12 function. And then finally we need to call the daughter, get Mefford to finally get this data, so the rest should be pretty straightforward as it is similar to what we have already used . Just after they get Mefford, we're going to call a list object Kohli dot for each Mefford. So canoe through each item inside here. But I'm going to store each item in the list valuable, and then this runs a function for each one. First of all, let's grab our data. We've called ST Ah on its that is equal to list the data Mefford, which we looked out in the last video. And then it's an act the list object just after here, we're going to construct our actual list, which we can, then it push the states. So remember when we did this for the balls over in the app dot Js We stole the data into a variable within created a board object where we had the data. Are we also needed to merging the I d, which wasn't available from this data method which is to the same over in the board. We create our list object. This is going to be equal to our i d which would grab from least thought I d. And then we use the spread operator emerging the rest off the data low this week. And then it's at the States with this thought set State estate that would want to aren't is the current lists. So we have this already set up as an empty ray. So that said this inside of here. So we're looking for the current lists going to be equal to an object where we spread in the current state with this don't state dot corrine ists separated by a comma with an emerging our list object, which we just grated. So now this method is grubbing our current lists unfiltered and them into the cooling board view. Next step is actually call this method when the components will mount. Let's do this with this. Don't get list and remember, get list will also need a board i d. Which wouldn't pass in as an argument using their stock props. Don't much to get these from the router. Won't you select the prom's and then also the board? I d. Okay, say this file and head over to the browser, then go to our projects. If we open up the console will see a strange warning. It tells us that the query requires on index and then we can follow this link to create this so we can click on this link which it provides. And then this will take us over to the fire based console where would create a new index so we can see that fire base is going to create an index photos on this list collection. We can also see that the methods which we just added but also taken effect onto these fields we sort in the list off board into ascending order on also the created A property into ascending order to. So we'll go ahead and create our index by clicking this button. This is required since we in our perform in a more complex query, Remember, we're using the Web effort to filter out documents by the board I d. And we then sorting them by the creation date. An index is a way to structure our data to allow firebase the locates our data more efficiently, resulting in our query being performed much faster. It basically will make firebase aware that at some point in the future, we will be forming a more complex query. So for your base can be ready for it. So this may take a little while to finish. So pause the video and come back when this is all done. Welcome back. Once this index has been created, now will be a good time to delete all of the lists and cars we currently have in the database. Let's head over to there and we start with the lists. You want to click on this icon on, delete the collection. Also typing in the name off lists to confirm this and also the cars. We can do the same that you move these. So this is because they are linked to the board I ds from the sample data. I'm gonna long using the example data. So therefore, we don't need these. So now we could go back to our application. Let's reloads. Then we can create some new lists that's on this one this to and then we fresh. You see an era now saying cannot convert unidentified orginal object. So the reason we're seeing that this error, which is related to the stock props don't list or title over in the list components is because we're still trying to live through cards, which you don't have yet. Remember early on, when we had our sample data, we had some cards I did as an array inside of each list objects. I would no longer have these values, so we can now remove this from the Enlist doctor. Yes, all we need to do is to comment out a loop, which is this section here, which is run to announce a card component over to the browser. And I could see the two lists which was created. It's also created some cards, so God Juan got to. We can understand this, too, as well. So card for list, too. We won't see these cars just yet because we just commented out the car components. But if we go over to fire base and then refresh console, first of all, let's trickle the lists. If we click on these, these now linked to a particular board, the same with our 2nd 1 And if you go to our cards, we can also see these are connected to a list I d. What about the 3rd 1? And this is a different I d to the 1st 2 to finish off this video we can now read the cards from the database, which will follow a similar pattern it to our lists over in our early start. Js components weaken first, call the method from inside off components in Mt. Just a little our state object weaken hard components. It mounts set of our brackets and other curly races inside. Here we can call this dot fetch cards, which is the method we're going to create in just a moment which is going to pass in the list. I d. With the stock props Don't list thought i d. Then we consent of our custom method just below this. So this is fetch cards. This is going to be a sink function which is going to take in this list I d. Which is being postulate, says Alvaro function. Then a try Hyundai cut block passing the error got a console dot era with the text off error, fetching cards out a comma and then output our error. So now we're concert things up to get our cars from the database, which will much this list I d, which is passed in So you can do this inside of the try block. We're going to first create a constant to start over cards where we're going to await the data from all cards, ref. After this, we can end it train onto the end. The taught where Mefford remember, this takes in free arguments. The 1st 1 is the value which you want to compare against. This is stored inside of the cards. It would take a look at the console. We want to it. Select the list i d. So it's a Nikon thought list i d. The second value is the comparison, which is equals. We won't strike it. This is equal to the list i d. Your stuff. Two days. We can also chain onto the ends The order by Mefford We want all this ascending by the card Don't created up property and then finally, to get this data, we call the thought get method after this week and then it's select our cards and then loop through each one with the thought for each. Each is then going to store each value into a variable call card. This will run a function which is going to construct our card objects. First of all, we can grab our data which is just like we did with the lists on the boards. We can grab our card object. We can run at the Data Mefford to grab all the properties from the card, and then it's like the card object. Next, we're going to then create our card object, which is going to be the one which will push the states we need select the I D, which is available from the card object. I thought I d separated by a comma what can then emerge in the data, just like we did with the lists on the boards. So let's test. This is working with a console log after object. We want to log the value off our card objects. So say this and then go over to the browser into all project. We can now reloads, and then we see that this query also requires an index to so click on link, or is it a console? I'm looking now? Create our index for the cards, too. Let's create this when this button pause the video and give us a few moments to build our index, and I'll see you in a few minutes with all indexes now created. We could go back over to the up and then reloads, and I will see our free cards of being placed into the console that's trying creating a new card. So test number one send this off reloads at the browser, and now we have 1/4 card. It just added with the text off test one. You can also see this is linked to this list I D. Let's try under the new one, but that's too reload, and I could see it out. Test to has a different list I d to number one. So the next thing to do now we know we have the correct data is to replace our console log with a set state. So there's no set states inside here. We're going to set the current cards, which we already have in two states. Great. I will object. We can then merge in two other states. Our current cards, also a person in our new card object. So with this now, let's go back over to the browser. And then if we search inside of the reactor developer tools, we can search for a list components, select one of these and then it down on the bottom, we can see our state off current cards. This hasn't array with two different cards inside here. Consider for a 2nd 1 on the stores and the free current cars related to this list. So the final thing to do in this video is to display these cards inside of each list. If you go back to all these components, I'm working on Cohen towns. This loop which will render out of a cards we can, Then it change the stock props to be the star state. Since we in our store in the current cars into state exactly the same before as our data, this is going to be this start states don't calling cards also person in the key over the browser. And I will see the lists now have the cards displaying in each one. This now leaves us with each card on the correct list, and next, we're going to look at how we can delete data 25. Deleting cards and lists from Firebase: we now move on to add in the functionality to remove our items from the database. Removing one item from firebase is pretty simple. All we need to do is to find the item in the database and then call a delete method. This is what we can do for the cards. The first thing we need to do is to add a simple remove button for each cars, which I'm going to add as a simple cross. So over to the Count Doctor s components inside of our days, I understood the context. We can add a hedge smell, spawn elements inside. Here we can add a on click event handler which is going to trigger a Meffert called this daughter Delete card. Inside the opening and closing span tags we cannot ahead Schimmel entity, which is the ampersand times and then the semicolon and also the browser. This will help put a cross which we can use to trigger this method. So now we're dealing with the cards store in fire base. We need to import the cards reference about the tough we can import. I will cause ref on this is from the string which is dot dot, slash and then fire base That would create a word delete card Mefford, which is called by clicking on this cross just above I will render Meffert we can add to delete card. This is going to be a thing. We will receive the event information when she calls settled zero function I was trying section and also the Koch person in the era So we can all put a console error with the string off error deleting card. So the first steps up in the tri section is going to use this event information to prevent the default behavior with any to grant the card i d. From props. We install this in a constant called card. I d unsaid is to this Don't promise dot data thought I d remember. Each card is receiving the props called data. So I go into the developer tools into react on the research for cards. This is receiving all the data for each card Inside of this data problem, he we access in it. This i d a normal can uses to access a particular card inside a firebase. With this I d. So below this crazy new constants which is going to be for other cards. You were going to await the cars, Ref, point your collection. We can then select a particular documents by the I. D. And we already have this card I d stored just a book. The last step is something called The Delete Method on this particular card. So card Dr Leeds, which provided by fire base. So let's say this and go over to the browser. Let's click own test one and we still need to refresh, since we don't have real time functionality just yet. But when I'll see that Test one has been removed. If you go over to the console and then reload this, we can check each one of our cards for Test one on. This is now being removed from all the database to next. We need to also remove the lists. This is a little more complex, since we also need to find on removed each card, which is also associated with this list. That's do is over in the list components, which is less not serious again. This also needs a button all across to remove the list. We're going to do this just after we are put the list title. So this line of cold just EEA it's a dishpan on the content is going to be the hatred ill entity off, um, sons times and the semicolon. This will also need a on a click event. Khandala. What? You're going to be this thought the Lee list. Look at the top. We can also import our list ref from fire base and then created this delete list method. This is going to be a think and then passing a arrow function The funny section. We can catch any errors at a console error with the text off a road deleting list. Okay, so the first steps in the try block is going to be to grab the list. I d. We install this in a constant called list? I d. On this list. I d is available on the props. So the stock props the props Name is list de Macon. Grab the I. D. I will only say second constant for our cards where we're going to await Well, cars, ref. So for this, we don't just want to call the thought get method. Since this will grab all of all cards in the database. We only want to remove the particular cards, which is associate it with this list, which remove in. So it's an artist down, weaken, chain onto the end The thought where method Remember this takes in free arguments. The 1st 1 is going to be the card. I thought At least I d The 2nd 1 is going to be the comparison. Wouldn't want to check if each list I D property on each card is going to be equal to this list. I d from crops so Tacoma. But in the list i d. And then we could finally chain on the get method to pull in these cards. So next up. But what you want to do with these cards, once we get them, buck well for each card which we get back, we want to call the delete method. But just before we do this, we're going to aunt a quick if statements, which is first going to check if any cards have came back. So if cards the docks don't then is not equal to zero in another curly braces. So this is basically checking if the length of the documents, which is being returned is greater than zero. So this means that we have some matches for our list. I d. We can then loop through all of the cards with the dot for each and then for each card we're going to call the dot delete method. We could do this with card don't wrath, not elite. So they should take care off removing all the cards which are linked to this list. The next step is to actually remove the list. So just above these car perfection, this is going to be a little simpler. Only to do is to create a constant, which is going to grab our list from the list. Ref. The documents which want to grab is the one which is equal to this list I d. Let's pass this in. We can then use this list and call the fire base daughter delete method, which will remove the list, too. So now we can say this. No contest is in the browser overthrown on into the projects. Let's go for least one so they should remove card, warn cartu and test too fickleness. We don't see any errors in the consoles. That's good. Let's refresh and now this has been removed over to the console. Let's first check our lists when I will just have at least two insider here. So the list is being removed. We can check the cards and now we just have this single card, which is from this list here. So this is all know working. We can click on a list to remove Under will also remove any cards which has been linked with the I D. Next up. We're going to be coming back to deleting items by also removing the boards from our up and also from fire base. 26. Deleting boards: the leading. The board is a little more involved than the last video, but still nothing we have not looked at yet. This is because we need to find the board itself and then all of the associative lists and cards, which belonged to the board before then, deleting all three of these collections. If we go to the board view, we already have a delete board button off the top. All of the other board related methods and also the ball state isn't kept over in the app dot Js. Someone started the deletes board Mefford inside of here, too, with an going to pass it down as props to the ball component so we can be triggered when the button is clicked. So the first step is to create the deletes board Mefford, which will passed away to the board i d. Let's go down just above the random effort. We can create a word delete board. This is going to be a thing we're going to pass in the board i d. When we call this and then sets up our arrow function. First of all, we can create the try and catch sections person in the error, as always, then could do a console dot error with the text off a road, deleting board the gold on and then pass in the era. So since we call in this method from the button in the ball component, we need to pass it down as props. Let's scroll down into a router when it's find the ball components, which is just here just after the router. Proper capacity in Italy's board, which is going to be equal to our method off their start delete board. If we go over to the board Dodger, yes, follow forgets. Let's aren't the proper validation. So we need to import this, since we've not used it just yet. Important the prop types. Then down the bottom, we create our prop times just above. We'll export this file so balls come it'll be no prob types says about objects. Only prop, which we get in at the minute, is going to be delete board. The board is the prop type or function, so we use don't funk on. This is also going to be required to inside of the random effort. We already have a button, the art of a click listener too. Let's go up and take a look for button, which is this one? Just here we can then aren't on click inside here. This is going to trigger a Mefford. So let's create this daughter delete board. So this totally board is not the method which will pass down because we haven't access days via props. So now we can go ahead and create delete board just above outside the random effort. So this delete board method, which we're going to add now is going to responsible for grabbing the i. D off his current board. The name calling needs elites board Mefford, which is being passed as props. Let's are this leave board? This is a thing. And then inside here, the first thing to do is to grab the Kuerten's board i d. And then stories inside of a constant What i d is going to be available from props. So they stopped props, not much dot grams darts Board i d. So number matched up. A Rams Is the router props on? The promise is going to be this board I D, which would grab from here restore this inside a variable. Therefore, working now past Ace Will McCall, Our deletes board method which we just created in app dot Js So they still props totally bored us and the board I d. So before we go any further, let's test this is all working so over in the app dot Js We don't have any content inside his try section. Let's do a simple alert, available name off board I d which is just being passed. So say this over to our project that's tries elite in the board. Great. So now we get the alert with the same board i D, which is in the URL when all the Mefford is now being called. So we can now use the I D to grab old ball from Firebase, update the state and then finally delete the board. So step on, you can remove the alert. Never could save the couldn't board to a constant. We could do this by waiting overboard. Draft Grab the document on the documents which you want to grab is by the i d and I d stored inside off the board I d variable. The next step is to update the state with this starts at ST inside here composite in Allstate object where we're going to update the boards inside the state. Well, said this up as an array. So the first thing is to use the spread operator to grab the current state off. This what state? The boards. So this will take a copy of all of the board's cruelly in states, but we want to remove a particular board. So how can we do this? Well, we can use a job script filter Mefford, which will filter out any particular ball from states. So inside here, we're going to stall each board inside. It's credible and then run a function for each one. So this function is going to be responsible for all neat return in any boards from state, which doesn't match this board, I d. So let's on our return statements. We want to return any boards where the I d is not equal. So this board I D, which would just delete it step number free, just not signed off this contradiction. We're going to call board dot elite to move this from five base. We don't want to it test this out just yet because we also want to remove the lists and cards for this board at the same time. So let's begin with the lists. So over the top of all trying section, we can start with creating a constant or lists on the assigned here. We're going to wait. How will this draft, which is all of this collection So inside of this list constant. We want to filter down all of the lists which are related to this board. I d. We can do this with the wear Mefford. This takes in free parameters. The 1st 1 is going to be the list dot board the 2nd 1 is equal to as a string, and then the third value is the board I d. So this is going to filter out all of our lists where the board property is equal to the board, which we just passed in. Then we can finally grumble these. Where did the don't get method? Since we now using this list draft, we can now go off to the very top of this file way, added the import, and also on this into and then back down to our method. So with this list data, which we now go back when I need to do two things, first of all, when it's art. And if statement that actually check is there are any lists saved for this call on board before we go ahead under, Lead them number two. If there is list available, we need to look through them and then delete. So just under get we can add a if statement looking jacket lists. No talks. Don't then is not equal to zero, then the cold inside. This statement will only run if it is more, the more list. So if these lists work and then loop through with the four each method for each, we're going to store each item inside of this list. Valuable says of a function for each one. So now this leaves us in a similar position to the last video. We have lists we need to delete. We also have to find the cards for each least two and then go ahead and to leave them, meaning we know how that some shared functionality. If we go over to the list, Doctor, yes, and then take a look for the delete least Mefford. We created this method in the last video to do this So rather than duplicated, we can lift this up to the app dot Js and then she have use all of these functions. Lets start by putting out the full method will be closing curly brace to delete list coated opt Audrius that space in it just above delete board. This method uses the firebase cards, ref. But you can see if we scroll up. Just, uh so we need to import this at the very top and then back down to this Delete at least Medford. But at the very top here we have a constant called list i d. This line is getting the data from props, but we don't have this list prop available now in this app dot Js so we could remove this line and then instead from call this Mefford will pass in this list. I d. I understand the rockets. Since we removed this delete list from the list components we're now needs, pass it back down via props. Let's go down into aboard inside of the router and then on this is a prop. So this is the least list honestly going to be equal to this Don't delete list. The notary board doctor. Yes, we can and is seen as a prop time. Let's duplicate this on this was deleted list list was down inside of the list component. It's American passes down as a prop inside this list components. So just after our list, we can also and I would delete this prop, which is going to be available from the start. Props don't delete list. So now we can have this delete list functionality available in the list. This is now receiving the cells props so you can add it into the proper time. So the bottom. So this is the lead list. A proper type is a type of function, which is also required Atacama in between so inside of the random effort For this list, we have a spon element which is calling a word. Delete this method. We can recreate this above to call the method which you passed down as props. So outside of render would create a new Mefford call. This the elite list sets up our function and then inside his function, we want to do two things. First of all, we want to grab the list I d. Because remember, from before. Over in the app dot Yes, when we moved over this delete list method, let's go back off. We also passed this in as a list i d. This list i d is available inside this list component by your props. So they start crops not least dot i d number confined to go ahead and call our delete this method with this No props Dr. Lee List which goes passing the list. I d save this file and before we go any further will contest. This list is being removed and this just wants to be lists rough in the app dot Js That's often s inside of here and also 63 67 when it's on the end and also here, too good. So it is no working. Let's try to remove a list that's on this one inside here. Refresh. Click on necks Now for real. Oh, this this is now being removed. It's also try one of these in the different components with this new click on the X. I'm looking also, remove this too. Okay, So I know this was a little bit of extra work to get this interview from components But it means we can now go back over to our up Doctor. Yes. Where we originally started a number can make use of this delete list. Mefford for each list with you have. So now we're looping through each one of the lists. All minutes now, do is call this the leaderless method, which we know how available in these components. So they start daily list. The list also needs to be passed in an I d unfired based all of this inside of an object called ref. So we can access this with list. Not ref those I d. Okay, so now we just need to give this a test on. In fact, this just wants to be our list Constant, Rather, novelist Raph. So give this a safe on. Now, if we go into one of these boards, let's go for test two inside. Here we have a list off born to even free on also the cars off A B and C. So now if we try to delete all aboard, let's refresh. Now. When I see all of the data has been removed, we can check the sounds over in the firebase console. Let's check our list. Tunnel cards helping remove too. That starts with a lists. You only have the single list on here rather than at number 12 and free. You know, cons. We still have the single car to on. We don't see a B and C. This is now all of the deleting methods which we need for this project. And in the next section, we'll look at how we can update our data inside a fire base. 27. Updating data in Firebase: in this section, we're going to be focusing on off dating or Bolds lists and counts. This is important, since the user may want to obey things such as a bowl title or label on a card. On those labels are something which will get into soon in this video. We're going to be making the board and list titles off eligible after we click on them, and then we can make any changes on push them to fire base. Let's start over in the board dot Js When can work with our board title here, we're going to be replacing it. The Koran bore title with hate small input element, so the user can then type into it. So let's begin by removing a weren't level free head in. So let's remove or comment out this line above and then inside here we can create a hate Kimmel import goes off and then on the next line, I'm going to rt type. What you going to be equal to text? Also a name which is going to be the board title on change which will trigger a Meffert which is going to be called update board, you know, start tribute is going to be the default on you on the default value is going to be equal to this, not state, So it couldn't board no title. This is going to grab the title just like it did above in our level. Free head in using the default value rather than just the value. Attribute will specify the initial value, but then leave subsequent updates on controlled So looking there for Edit this field. Don't save this file and then go over to the browser into a project. How many's Goldbach Select the balls economic on this title on Edit it. So, of course, this won't be saved to fire Base at the Bowmans because we haven't created this update board Mefford, which we call an insider. Here, let's do this outside off the Render Mefford when creates Update board plus in the event information, and then it sets a bowel function so this actual board update will happen. Open the app dot Js along with all of the overboard actions. Let's begin by Graham in the board i d. Installing it inside of a constant The bond i d. Is available from the stock props. Not much. Don't the Rams don't born i. D. So this is a board i d. Which is available from the Wirral Parameters. We store it inside of this variable. That's no creating new constant, which is going to be called new title. This is going to store the value which the user typed in. We grabbed this from me, not current Target don't value next over and Grace. And if statements where we contract if the board i d is present and we also wants Jack, if there is a new title, if both of these presidents we want to call a method called update Board which we're going to create in the up dot Js in just a moment, this will passed down as props so I can access this with this. No props don't update board. They were going to send to this method the board I d. And also the new text which is saved in new title. Let's now go up to the up dot Js on weaken created this update board Mefford which is going to be responsible for saving this to fire base outside of the render of day board. This will be a synchronous I would take in the board. I d on also the new title we can set. So big trying section, then the car just off the words passing in the error. We're going to a council error with the text off error updating board also passing in the era. Okay, good. So now the first thing to do is to grab the board from Firebase using this board I d. It's store this any constant called board we have aboard rafts, which points to a collection we want to target. A specific documents on this document is going to be equal to the board i d. The next thing we could do is call a firebase method called Update and then insider here, we're going to pass in an object. So the field which we want to update is a title on. This is available with board dot title. Okay, I said this to the new title which is passed in. So that was created. Its we also know needs passes down to the board components since we call in its from the board dot Js this past season as props, this is what they board. So they started a board over to the boards, Doctor. Yes, I can also add that these two are proper time stone at the very bottom it is. Okay, board the proper times. This is also a function which is also required to save this file. No, over to the browser. Let's drink this down. I'm gonna put this side by side with the firebase console. So we consider this update in in real time in the console. Let's liked our to do board, which is this wondrous Tia, Look on or title. Let's try to add some different Texans here. I want to see this update immediately. We could remove this. Let's try to refresh if we now reload, the browser will see this data. It will persist after a reload. Changing the list title is also very similar to if no even simpler since I'm going to be at in all of the cold internalised component. So there is no need to pass down props if we go over to the list. Doctor. Yes, We can replace or p elements within import scroll down to the render rather than lp elements. We're gonna move this. I hate Schimmel input. The type is going to be equal to text. We're going to also have the name, which is going to be the list title on change. This will trigger a new Mefford, which is going to be update list and finally the default value. This default value is going to be equal to this stop prompts. Don't least not title. Someone grabbed this from above. Then we can construct the OECD a list outside of the random effort. This will be a think taken in the event information. First of all, as ever, we add our try section and now a Koch for any error handling the consul era. It's going to be string off era of Dayton list also passing in the era just afterwards. Okay, so update list also needs access to this list I d. So let's grab this constant from just above. We can that are this in a second constant off new title which is going to stall in the value which the user has typed in, we could grab this from me daughter Corrine Target. Thank Rob the value which the user has entered. So next we grab our list from fire based on story into a constant call list. Let's await the list rough. We can grab a document by the I D and I D stored just above in list i d. The final step is to call the update method with list dot update inside here as an object, we're going to update the title field, which would grab from least door title and set this equal to own new title. Let's give this a go. We need to go over to the browser on Find a Board, which has a list. Let's go back this to that's Click on this and change it to be List 200. You can also check side by side. At least 200 American series has being updated inside here. If we refresh this now, stays persistent inside the browser. I mean, this is now being stored inside a firebase on. We know retrieving this in all its components, so that's enough off date innately Borden list. The card update will have a little bit more to it. I will begin this in the next video by creating a pop of motile to make our changes 28. Edit card modal: on the finished version off the project, which I have open here. If we click on any of these cars, he takes us to a popular model. This model will allow us to edit the text on the card and also to aren't aren't removed labels to labels or something which fellow uses as a kind off tagging system. So, as an example, if you wanted to visibly see all of our cards, which we've completed, may want to add a green able to show this, this model is going to be a new component to handle all of this on that, this is what we're going to go ahead on. Great. Now the styling for the model has already being provided in the CSS styles, which you should have downloaded earlier. Just add it some basic position in on style in so we can focus on the hate Schimmel on Java script inside of other components. Let's start by greatness over in the Components folder. That's quite a new file called at it card Motile Darts Jazz Extension. This component deals with props, but for now I'm just going to create the basic markup and then we'll come back to You aren't in it these soon. Let's begin with important react. Niman. Create our class based components, which is going to be called edit card motile. As ever, this is going to extends. React dog components inside. He would concert our initial states says about objects. And then the first piece of states which I'm going to add is for the available labels. Is he going to be an array, which is going to contain six different values for the colors, which are available to select the 1st 1 is a hex value off 80 C C F. F. Separated by a comma thing going to copy and then paste is seen five more times to give us 60 from values. So the 2nd 1 is going to have the value of a zero double after Bill A. The 3rd 1 This is going to be F nine for a one e. The 3rd 1 is going to be double FB free. The left number five is going to be BF 00 double F, and the last one is double F, A de 33 separated by a comma. We can also aren't a MT array, which is for the selected labels. Selected labels will hold each one of these values once the user clicks on them. So below this, after our states, we can answer the random effort inside here. Then we can't return our JSX. So first of all, this is going to be surrounded in a rapper, which is going to be contained in a div. So the class name is going to be equal to motile. Rapper closes off inside Here we can nest in a second if which will have the class name off motile body so this mortal body is going to have a farm section. Let's take a look out to the finished version. Click on one of these so this model is going to have a close button at the top. Right? Which one would click on This will return us back to the board's view. We're going to add a title. Then we're going to live through these available labels, which you just set the state and then display these After this will have a editor area where the user can edit the text for the cars well by the selected labels, which was the second item in our state and then a submit button to save these changes. Let's go ahead and construct is now inside off this Dave. So first of all, inside here we conard a form nested inside becomes on a div and this is going to be a div for the first section which is for the available labels. The top of this motile section hard a cross which musical click on it to close down the motile. We can argue this with actual entity which is, um, sans times and then December call on this is also going to have a class name have i d. C s s off motile dash close just closed on the side bar to give us more space and then it just after this bump AP elements, which is going to be 40 text off aren't slash removed labels. It also has a class name which is for label dash title. So just off this title, we're then going to loop through each one of these items in the array. Since it is no jobs group to open up the color braces, we can access the available labels in states with this star states thought available labels . I wouldn't go too much through each one of these six values. Store on each item inside of this label. Variable inside. Here we can return a hate smell spine elements for each available label so close it's off. The spine is going to have a class name, which is going to be equal to label. So the key pass off this spun element is going to be a style property. The style property is going to give the label the background color, which would have set in ST so down just after our label, you can set the style open up the double curly braces on the fact that started this onto its own lines with more readable inside the curly braces. We consent to the background to be equal to the label and then finish off this Dave section with a horizontal line. On the page are elements just blow this deal. We're then going to add a second Dave, which is going to be for our second section. This second section, if we click on any of these, is going to be this edits area. So we're going to have a hedge male entity, which is going to be this little pencil and then we're also going to have the input whether use can change the card text. Let's out this. No, this deal is going to have a class name off at its area. Then the first thing is going to be a spon or original nce equals name which is at its icon . The hatred lnc for the pencil is the ampersand. The harsh x two 70 Then another case E followed by the semicolon. After respond McKinnon at the input which is for the text. The import also has a class name which is going to be equal to textbooks at it. And this is all we need now for this section after this text area, Dave, we're also going to create a furtive section. This is going to be for labels which the user has selected that starts with a P Elements, which is going to have the title of labels followed by a colon. E P Elements has a class name which you're going to be equal to label dash title. So then afterwards, we're going to add some job script which is going to loop through all of the labels and then display them on the screen. But although I'm just going to add a to do section and then we'll say display labels, common dissection out never conducted is in a later video. The final thing of all this form is to add a button. This button is going to submit the form so it needs the type off, submits the text off safe changes. Then finally, for these components, we need to export defaults the name off at its card model. Okay, so let's give this file. It's a even go over to the card doctor as components where we can import this new file. Look at the very top Are this which was the edit God motile prawn balls, Nash. And then at the card motile golden down into our render Mefford weaken. Now out. Put this into the browser. Let's do this right at the very end. So this is called at its card. Motile closes off and now because we have two elements side by side, we also need to add at this in a fragments so reacted all fragments we can. Then it take the clothes and tog at this to the very end. So if all goes well, we should now see this over in the browser. If we go to all projects. But then we need to other cards. Let's quickly out some list. So ABC Refresh and this other card want to, then free. Okay, so when I'll have some content on the screen we have, all of the labels will have the text area and also the label section at the bottom. We have the cross to close it down and also the Putin to save the changes. Honestly, none of this will work just yet. We also only want to show this when the card is clicked. On least we can add a building on value to old local states over in the card dot Js. So about the very top we conard, it's, um, state said about objects. Never consent to the initial states off motile open to be false. Then below this, we can create a new Mefford, which will toggle this between True on false. So it's called this total motile. That's a bowel function. American Tuggle. The states with this starts that states inside of object. The state who want to Tuggle is motile open. I'm gonna set this to a value off this start States motile open. We can then at the exclamation mark just before this which will do the opposite of what is cruelly set in states. So each time this is clicked, it will take what is currently there and then do the opposite. We want this total model methods to be triggered each time the context is being clicked. So can, as a click handler onto the text below. So into all random Efford, the P element, we can then add a click handler inside of the open brackets and said it's equal to this daughter Togo motile. So remember, inside his card is where we're going to render out our motile. This motel needs to be aware off these total states so we can pass it down as a prop. It's a motile open. Well said, Let's do this. Not state but motile open. So this file American head over to all motile components. Now this problem can be used to set the display type using a job script turned the operator . Let's go up to our model rougher, which is this dude just CIA and then just Afterwards, we concert to the style. Without this onto a new line, we can set the CSS style property with the double braces. You consent to the display type off this mortal to be equal to this don't props but motile open. So if this building on value is true, we're then going to its set of this display time to be equal to block or, if this is set to false will set the display time to be known, which will hide this mortal components. So now let's say this and then testes over in the browser into a project. We immediately see that we have all cards and lists, but we don't have the motile component displaying. Let's try clicking on the text, which will now trigger this method on. Open up the model, However, though if we click on this X in the corner to remove, it does not work at the moment, but we also need to pass down at this Tuggle mortal method. So let's go back to the card doctor. Yes, we have this total motile, which is just here. We can also pass this down into our credit card model as a prop So when a new line can I talk a model which is going to be equal to all method back over to the motel components? We can now attribute this method when the X has been clicked. So this is these fun, Which has the X We can I d click handler, just like we did before, which is going to ruin it. This prop. So long click I said this to this, the probe's dot tuggle model. So because the Broncos over can now give us a go. So let's click on the model, which would pop us up, then click on the X in the corner, which now runs the Tuggle Motile Mefford and then sets the state to be the opposite, which is false. Good. That's now taken a little bit of type in it to get this mortal working Well, we need to know do is too connected to some methods to edit the cards on. This will be our task. In the next video 29. Updating the card text: inside of our project. If we go over to the reactor developer tools and then insert for the card components if we select any of these cards, we can see over on the rights. Inside we have this data prop which is available to each one. This contains all information about the current card. So chancy created. Update the I d on any labels which is stored inside a fire base. Since the model is going to be responsible for change, you know, update in all this data, we need to pass this data down to the motile component. Let's do this by first going over to the card doctor. Yes, and then inside of the edit card motile, you can then add 1/3 prop to this which is going to be called the card data. Then we composite is data down as props. So they stopped props dot data never go over to the edit card motile. So remember when we created this components open state, we also created a selected labels array which was said to be empty. No, I have the data available from fire base which includes any labels which have already been selected. We can now update this array to include any cards which accordingly saved we can use a soon as the component mounts, we have components it mounts. And then inside here was simply going to set the state with this starts that states on our object is going to update the selected labels with the value from all props which is stored in car data on the card data wants is the labels field. Now let's say this and open up the motile on, see what we need to do. So go to the project, click on the text. So the first thing to do is to on the car text inside of this text area so the user can change is if they would like. The second thing to do is the loop through all selected labels and then display them just under here. So let's start by under an IndyCar title into the text area back open to the s cold. We can go down to the random effort and take a look for the import which is just down here . I said these onto the online so we needs are the default value which is going to display the value off the text. We can set this from crops so they start crops. Card data don't text, then the second thing to do wants to look through all of the available labels in state, then display them. Under this labels title. We already have a place. All the comment where one needs to appear, but no one to replace is by mapping through all selected labels. So inside the code of races weaken selectable stains, the selected labels and I'm going to use the map method to live through each one story, each value inside of a label we can. Then it set about function of each one. So inside here are we going to do is to return html spine elements, and this one element is going to have a background color, which is the same as the label color. So inside opening side, we can create a class name off label. We're also going to set the style of on you with the double curly braces, said the CSS background property to be equal to the label. So this background color off label is going to be equal to the hex value which we have inside the state, so this selected labels will contain any of these hexagon values and no scrolling down weaken set thes to be the background color for our span. Since we looping through, we also need to add a key, a unique eat each one of these spawn elements. So just after the backgrounds and also onto the key, which is going to be equal to a label, this is going to be fine to use, since each one of the six close is unique, meaning we won't have any duplicates. So say this and then over to the browser. Let's now go into any one of these models by clicking on the text so we see the text inside of here with the value of one. Let's find them a free. We still don't have any labels available for this card to display. You will see the value off free is now in the text input to enable us now to edit this card , we can add a new Mefford onto the form when we submit. Let's go back over to you all motile and it's growing up to the foam inside the opening time. Weaken aren't a on submit which is going to be equal to this thought. Hoped a car. Just before we go ahead and create this update card method, I'm going to add a ref to the text input to first grab the volume. So school back down to the import with the class off textbooks at it, which you just here just after default value. We can also add a reference with this the text input now above wanting to create this ref on also the update card method. So just below component ID mounts would create our raft, which wasa text import that said this equal to react. Thoughts create ref. After this, we need to create our update card method. At the moment, this method is going to concentrate on update in the text. We will come back to the labels very soon. Let's start by making this a a sink function which takes in the event information set of the arrow functioning. What are the try section the catch section just below, which is going to pass in the era and then a consul era with a text off era updating card coal on banana pass in the era. Okay, so inside off our tri sexual going to first call. Prevent defaults on the events to stop the default behavior off the browns That reloading next opening to create free constants. We need to grab the idea of the card. We need to grab the new text which is being added. Incident foot fields. And then we need to grab the current card from Firebase. Let's start with the card I D. Which will have available inside of props. So card data. I thought I d The next one is for the new tax which is stored inside of this rough. So const, you text This is going to be equal to a referee. New off this thought Text input. I'm gonna grab the value with dot Korans don't value. The third constant we need is for the current card from fire base. We're going to wait this information coming back, which is from other cards. Raft. Don't talk number capacity in our card. I d No, I have the card from fire base. We can call the update method inside. He was set up our object un finality only field, which we're going to update is the text I grabbed this from card dot text. Certain is equal to our new text Constant just after our updates broken. Then it close our motile by calling the Tuggle Motile method, which is available from props So there's no props. Don't talk a motile. So as soon as the card is being updated on the former's being submitted alone, it closed on the model on return to the board view just before we continue. Make sure the cards ref is imported at the top of this file on. Also, make sure this is I D. Okay, so let's give this a save and go over to the project. Select any of these cards, picking the motile Jane's value inside of the text input. If one I'll save the changes, it now struggles the model to be closed. And if you go to the console, reload this into the cars collection and I will contract our card. Number one is being changed to 100. Inside of our project was still need to do a refresh to see the changes until we aren't our real time functionality later. So this is all winnings, and I don't do to update the context on In the next video, we'll concentrate on updating the labels 30. Setting the labels: look date in the labels inside of all card components will involve a little bit more work than the last video where we updated the text. This is because we'll be talking the labels on and off. So when a label is clicked, we first need to check if the label needs to be added or removed. To do this, I'm going to Are they in line? Click handler, inside of all model. So in the edit card model in this section we created in the last video, where will you prove all the available labels? We can also add a on click event handler. This is going to be an in nine arrow function, which is going to call a method called This Doors set table, also passing in the Kuerten's label value. So as soon as the user clicks on any of these labels, it's unwanted figure, this set label method, which we can now create outside off our random effort. So says Label, which takes in the label, which is passed away. It's sets up our arrow function, so the first step inside here is to create a constant which is going to be called labels. This is going to store as an array all the currently selected labels, which is stored in two states. So they spread these in with this. No state thought selected labels. The next step is the truck. If this past in label is currently stored inside of this array, let's do this by creating a if statement we can check if labels thought includes which is a jobs good method taking in the cool enable? Open up the colored races. So if this past in label is stored inside off our labels, Ray, we don't want to call the filter Mefford to remove it. We install this inside of a new array called the new Labels. Weaken Grab According to recall labels, call the jobs. Give filter Mefford, the network. Install each value inside here into a variable called element. That's about function to ruin for each one, which is going to return any other moons, which is not equal to a label. We can then off data with state with these thoughts that states where we're going to update the selected labels to be equal to our new array. So this is what's happening if the label is included in the ray, if it isn't within going to are they l section, which is going to push the new label into state. So we have the labels looking and called the jobs Good push Mefford, which is going to push the new label to array. We can then update the state once again off dating these selected labels with the value off our labels array. So just to recap what we're doing here, we have the selected labels stolen in two states, which wouldn't taking a copy off. And it saved notes of his constant with an checking if the label, which the user has just clicked on, is stored inside this array. If it is, we're going to go ahead and run this section of code, which is going to be responsible for filtering out the current label and then start on the rest of the values into this new labels array. Well, then finally pushes the state's once the label has been removed. If the label, which is being clicked on, is not stored inside a state with any rudeness, L section, which is just below, and instead this is going to push a new label toe array and then it say this to state. So now we can go back to update card Mefford, which is just above um I couldn't update this toe aren't our labels. So just after the new text, when creator Constand's call labels and said this equal to the value stored in states so they stole states thought selected labels, we can also pushes to fire base inside all update Mefford we can also selected the card North labels feels unsaid is equal to old labels. So say this and let's go over to the motile click on any of these and in select label. So we currently don't have this into state. So it's added. If we click on it again, it will then remove these from state by calling the filter Mefford. Let's see if any of these are Pune and Fire Base. We click on these two, save the changes, then reloadable cards on this card. 100 is now being updated with our two colors. Okay, Good. Before we go any further, this motel component is also receiving props. So can on some proper validation. So whatever we can import the prop types prolong module, which is cold prototypes. So this card model is receiving free different props If we take a look in the car, that doctor Yes, we have the motile open. We have total mortal on also knee card data. So back down to the very bottom off the motile we set up our probe validation So edit card motile no prob types. A little case be it says about what object? The 1st 1 is going to be mortal open which is going to be equal to prop times. This is a building on value SoGen Select Dollar bill. This is also required. The 2nd 1 is total motile This prop time is a function, so I don't funk. This is also required on the third and final is of a car data. The prototype is an object which is also required to once he says about prop types. The final piece of this video will be to display inside roll application these selected labels just above the context. But it's we need to create a loop inside of the card dot Js a number inside of this card components. If we open up the reactive developer tools, it was hurtful. The card this is where we store all of all card data inside of this data problem. So inside here we have the labels, which we're going to live through for each card. So look at the top of our under just underneath the class of card, going to create a new DIV, which is going to be a new section it to contain all these labels e class name. It's going to be equal to card labels open of the code of races. We can access all props on the data labels do proven we can use the math method, which takes in the label that's about arrow function, and then it's going to return a span element for each one we can possibly noble key, which can simply be the value of each label, the style. So we have the cool of on you, we can say to the background color, Do you also equal to a label? And then finally we can, as a class names of this which is going to be labeled good. It's not give this final saving in gold to the browser. We can instantly see that the two colors which were added, has been updated in the car components. Let's try to move in the blue color and add in the green on. Say the changes refresh, and this is now reflected inside of the car component. So all of the updating features are now complete. I will see you next. Where will improve on this card by allowing multiple lines of text. 31. Text area auto resize: if we click on any of our cars and open off the edit motile. This is currently a text input which will only last target Text on to warn a single line. It will be better if our cars could have multi nine. Text on the card would expand to fit to each line. To do this, I'm going to add a package called React Auto Size text area which will allow us to on this 12 project. This will give us a text area which will also resize the height of the card based on the number of lines of text. Let's go over to V S code on at the store project down to the bottom. I'm going to closed on server way to control sea American run MPM I reacts Dash auto size Josh text area and then it's run this Once it is done, we can restart the servers with MPM start, we'll be using this package in both because on also the motile So let's start with the card by importing the package at the top of the file. So inside the card a doctor Yes, that's it upsets off. We can auto import someone's call this the text area. Also size promo package name which is react Also size dosh text area. Okay, it's now let's go down to a random Efford. We'll have the text. So inside of the car body we have this P elements within on click event handler which will toggle the motile on this displays the text of a card instead of this line. I'm going to comment this out and then below we can use our new text area also size just like we would do with any react components. This house is opening on a closing time where we conard various methods or attributes. So instead of our own click event handler being on this p elements, we can take this out and added to our text area. And then after this, I'm going to Are the attributes called read? Only we aren't. This read only attributes onto here because we don't want this card text to be eligible. Instead, we simply want the user to be able to click on this and then open up the motile. So after this we can also aren't Avon you on the next line undervalue was going to be equal to this The promise. What data? No text, just like we had above in the P elements. So now we save this and then over to a project. See, the text is now Show one for each card Elements on things Look exactly how did before they look the same Because there is no extra height or content to show. You can also see because you've added Read only wants to click on this It then takes us straight to the mortal without allowing us to edit the card itself. The knowledge school to the motile I'm looking replaces import with our new text area auto size So over to the edit card motile we can first import this art Eva it off. This is also going to have the same name off text area also size for all pockets name which is react also size, text area and control down into a render section. We're going to comment out the corn import and then replace it. Waited this text area well, here we are just underneath the edit icon. It's comment out the input section which you couldn't have. We can then replaces with our text area, which is a component name Text area also size inside here. We're going to add to the same free attributes that were hard of this import. So we have the class name. We have the default value on also the ref. I'm going to cook these outs on that pasty is in. We don't need this close in imports. Now you can save this file and we're good to go over to the project. Let's try anything at this card. Number two, click on this. Um, continue. If we press enter, weaken now are things onto multiple lines? We can go ahead and save this. You can save changes. Reloads. I know what text area is now working in both components just before we move on. I'm just going to remove any errors which you know, in the console. So the 1st 1 is any board preview online too? Let's open this up over the top on line two. We're doing a import, the board, but you no longer need So say this. The 2nd 1 is the logo in the app dot Js which we're not going to use in. But it's up to the file. We can also remove the SPG, which was imported from create react up analyst components online. Five. We're not using a sink. Let's pull up to 95 but I don't always. You came from some kind of also complete. Then finally, also, it's out a unique key in the edit card motile, which is lying 67. Let's head over to these components down to 67. What kind of key? And said this to our labels on you. Both the browser and I will have a clear console to move on with. So this is the end off our updating section. I hope you enjoyed it. And now let's move on to looking at real time updates. 32. First look at onSnapshot: each time we aren't updates or remove anything from our project. We need to do a refresh to get the new data. Well, this is true for most things. If we were to go ahead and add a new board, let's say courses to take Nikola and then create a new board. We see this will appear without a refresh. I wanted to show you two different ways. We can approach update in this application. The first is just as we have here with the new boards. Each time we aren't or remove aboard, we set the boards into state. And as we already know, one of the benefits of this easel updates all of components which will use the state. It is also going to be generally faster than waiting on the database descended eight a buck . But this also means we have two sources of the same data. We have the board stored in state and also in fire base. If one ever occurs, went updating even one of these, it can cause of application it be out of sync. Another approach which we know going to use forward lists and cards is to use fire base is real time functionality to tell us when that something has changed. So rather than was asking for the data by your base will send it towards each time there is a change. So let's begin with the get lace method in the ball components. So go to the board dot Js Let's go up to get lists. So this is here. Just about the top of this file get list uses is get method to get what is called a snapshot of all the data. At that current time to get real time updates, we're going to place this. Would a Mefford called on snapshot on snapshot of touches a listener which will notify yours when a change has been made. To do this, I'm going to comment out our existing data. So everything just above of a catch block all the way over to the gets method. Now we can begin to replace this with over on snapshot method the same principles to apply . We want to get our data blue Pruitt, create a list object and then save it. The state. First, we call on snuff short, which takes in a function so just in the order by we can then call on snapshots person in the snapshots for each function. Each data Snuff Short, which is an object containing details of a query We then once call a method called doc changes. So it's not short thought. Doc changes DOC. Changes will return on Array containing the changes since I will last Snapshot. Then what do we need to do when we have an array of data? Well, we need to live through it so we can work with each individual item. So just after he weaken and call for each person in a callback function, Sophie change. But I'm going to run the code inside of these braces before we go any further. Let's do a console log. I'm looking. Log the value of change, save this file and go over to the browser. Open up the console, click on any of these boards, and that's at a new list. That's a to do list. Warn it center, you know, get a council look. So one thing we need to note here is this type off added Paris in mind as well needs come back to this very soon, But the main thing here we need is this talk? This is a snapshot off the documents containing all the data which we need. We can see it has the i d. If you click on this, I'm looking love this with Dr Out. I d Something which is not so obvious by looking at this talk is how we get the rest of all this data. Well, we're gonna fight. Get this by calling a data method. Let's go over to our council log. We can access our dark, which we have seen in the console and then the data method. Save this when l c inside. Here we have our list object which contains the board. I. D. D. Created a date on also the title. So this combined with the idea what seemed for Well, no goes all the information we need to construct our new list. So let's go back over. We could remove all console log, then inside off. Our for each would create a constant called Doc. This is going to install the value off change dot Doc given us a reference to our documents . The next step is to create our list, which is going to be an object we first need to grab the i D, which is available from Doc, that I d which is exactly what we've seen before. So Doc is equal to change that dark the i d. But I need to grab the title, which is available from Doc the Datum effort, which we just looked at grab our list objects and then it grabs the title outside of our list object we can. Then it set of the States. So this starts at ST passing in. The object the state will want to update is the current lists as an array. We're going to merge into the quarry lists. So this those states Dr Realists, then separated by a comma, we can add in our new list. So I will say this file never go back over to our project in the Broza we can try and other new list on this should be added automatically. So let's say to do this too it enter now. This is being updated without needing to refresh the browser. However, though if we know, click on any of these lists and delete, we now see a error inside the console on Also, our list has been added as 1/3 item. So the error message Don't in the console say that it encountered two Children with the same key? This is because of the way we handle our document. Changes on this is what we look at in the upcoming video. 33. Working with document changes: in the last video with schools on error. When we removed one of the lists, we got the message off, encountered two Children with the same key. And then we've seen an extra least appear inside while project. This is because of the way we have things at the moment. In our own snapshot method, we go over to the board doctor. Yes, we're worked in the last video and then into the get less Mefford. We always constructing a new lease item, and then it set into state, which is this section just here. So even if the item was removed, let's look at the change data from the list with an ad, it'll objects and then excited state. This will result in the Jupiter items, which you see here therefore encountering it to Children with same key. The fix is if you remember from the last video, we said the bear in mind limited the console log. There was a type off added welcome uses to either city state or to remove the item from state. Depending on its, the list was added or removed. You can do this with a if statement. Let's go back to a board dot Js And then it just above where we construct our documents Looking at an s statement to check if the change don't type is equal to the string off added If it wants, we can open and close the curly braces and then grub all of our data from said states our list now with documents then at thes inside of always statements it snows will only assess our state if the item is being added. However, if the item has been removed just underwear statement, we can Then at eight second s statement jacket, the change, the type this time is equal to removed. If it is, we can then open up the curly braces number can once more set of the state, that's about estate object the state want to update is the current lists set up our array. Now, since we are removing night on from state, we can use the job script filter method. We can do this by emerging into our array a copy off the current lists, so merges in with the three dots. So this those states the current lists we can and it call the filter Myford inside It is filter Mefford. We're going to run a function for each item inside of a list, so we want to return on Lee. The lists where the list thought I d is not equal to change the dog. I thought I d. So just to recap what we're doing here, we grow all of our lists from states. And then we're going to only return our lists where the i d for each particular list doesn't much the one which has been removed and this is available from change dot, dot dot i d. Now all that's left to do is to save this and go over to the browser inside of a bold looking ARDS. A new list, let's say to do list three out this in and I want to move any of these now. These are added un removed without causing any errors. Finally, from the last video, we still have the commented out section from where we used the guest Mefford. We can now safely remove this since you won't need this code anymore. So this is our list now working with firebase real time data. Next, we will also apply this to other cards 34. Realtime cards with updates: We can also add it this on snapshot listener tour cards, too. Meaning because any updates. If we are any cards or delete any, these changes are immediately reflected in the up. Let's do this over in the list, Doctor. Yes, which is responsible for fetching the cars with the fetch cards method. Let's go down to fetch cards, just like with the list. We're going to comment out everything from adjustable catch all the way up to the get method, and then we can now replaces with our snapshots. So just after order by working hard on snapshots, which then takes in eight snapshots off each change, says a bowel function, and then inside here we're going to live through each one of the document changes we can do . This would stop short dot doc changes for each document change. We're going to run at the for each method person in the change. We're going to construct our card just like we did with the list. The first ball create a constant called Doc, which is going to be equal to change. Dot talk within created a card set of all cowed objects. So the I D remember is from the talk. Thought I d separated by a comma. We also have the text which is available. You know the doc variable. We have the data Mefford to grub. All the data on the data want is from the card object on the field off text. This one also has the labels to. So just like the line above call data accessible card object inanity, fields call labels, Then, just like we did in the last video. We need to check the change type and then set the state, depending on if it was added removed. Also modified. Let's do this just after our card object looking are they? If statements to check if the change, what type is first equal to on it of the curly braces? No. McKinnon said the states. So this starts that states. So since this is a addition, we're going to merge in the current cards as an array with the spread operator. Grab these from states, so they start states dot Couldn't cards separated by a comma. What? I'm going to merge in of a card object underneath this first if sexual looking art a 2nd 1 to check if the change type this time is going to be equal to removed. If this is removed, we're going to do a very similar things. The lists we're going to filter out by the I. D. So we're going to first set up this Don't said state passing of objects selected equal and cards. What? I'm going to spread this, not state dot current cards where we're going to call the filter Mefford. Each item will be stored inside of this car available. Well, then only going to return the cards where the i d doesn't match the one which is being removed. So the card don't I D which is not equal to change. Don't talk both i d. After this removed section with and also going toe on a modified section. So this time, if he changed, our type is equal to the string off modified with then run this cold inside of the curly braces. So the first thing when it's do is grab the index number off the item which is stored into state. We install this inside of a constant called index. So this is equal to this. Don't state the current cards, but I'm going to use the find index method insider here Each item which will live through is going to be stored in this item variable. So therefore, we can only return the item where the item dot i d is equal to change, not talk that i d. So this is going to return a single item from all current cards. The item where the item I d is equal to the warning which is being changed. We need this in next number. All this position off item inside a state. So we know exactly which item to update. So the next step is to create a constant call cards which is going to be equal to all the cards in our current state. So then grab. These were the spread operator, so they start states don't current cards, so we don't have everything we know needs to update over state. We have the current cards which is being modified. We have the index number, which is the position which is stored in states. We have all of our rights and from states. So now we can go ahead and update this. So first, we select all of all cards in states with select by the index number. The individual card, which would want to update. So, for example, this would be cars zero cards, five cards, 10 all whichever number this is in our state. But I ain't going to replace this with our card, object from both and then set this two state with this starts that states cause you know of Jack's. So the current cards is not going to be equal to this cards array. We can no scroll down and remove the original code, so you really get method on also the for each. On also first, roll back up. We can now see we're no longer using this cards constant, so we can also remove this and just simply await other cards. Ref. So say this final and I will go to the browser on to test it. Sounds head on to a board. When it's hard, it's, um, lists. That's at ABC. Okay, also more on to all the different lists so we can add cards and he's updated in real time. Let's try to move in number two. That's good on them before. If we load these are still showings. Let's no try to modify these ashamed. Born to be hundreds, Savo changes any changes and now being reflected in real time. There's no leaves. Those widow boards listing cards all know updating. We don't need to refresh the browser. 35. React Context API: as African larger and more complex. We often need a better way to money jobs. State passing props down many levels, which is often referred to as prop drilling. Can I add a layer of complexity? This is where state management libraries, such as re looks, have played a part. To help Manage S Redux is fine, but it also means learn new things out into our hearts overall size. And it can also add complexity. If you were only using it to pass around ST the solutions that is it cuz react context a p I context was created to share data that we need in multiple parts of our up. In this section, we're going to be using fire base to provide user authentication so users can log in and sign up and then only see the boards which they have created. This will be a good use case for the context. A p I. Since he logged in state is needed on multiple pages when using context, we no longer needs passed down data. You know, Casey logged in states from the parent component through the child components. Instead, we basically have a component with global states which we can import directly into any over components so we can access the data. First thing you may be thinking is, why not just move all of our state into this context? And this is a good question. While this is certainly possible, the creators over react do discourage this since it can make components less reusable, unfasten down props. Only a few levels come be a much simpler solution Over in the components directory. Let's create a new file for over context. So in the components new file, I'm gonna call the city off context. Don't you guess this file name is up towards Boots have named the sea off context since will handle the user authentication. We'll put the top of the file. The first thing we do as ever is too important. React from react. This wrapped package will allow us to access the create contact method, which we can now store in a constant called off context to set the sequel to react. I thought great context with the brackets just afterwards. So now we have this context object. We can create two things we need both a provider components on. Also a consumer does both of these sound, the provider will provide the data to other components on the consumer, will get the data and also be subscribed to any changes. First, we can create the provider components just as we would with any normal react Components. Wouldn't great a class hold off provider which extends reactive components, since its provider is responsible for providing data but can also add in any states, Let's set of all states object where we're going to set the initial user to be an empty object. We also need to pass in a random effort to just as we normally woods inside here. We're going to return some JSX data in between the brackets. However, this is not going to run the out JSX like we've done previously. Instead, we're going to return a context provider components, which looks like this. So grab the off context. Off contacts is the variable, which was cited just above. Then we're going to access the provider with a capital P. Close this off. These components will allow over components to subscribe to any data changes inside of the opening target takes in a value on this value combat anything which wants passed over components I'm going to use it passed down the user from states which you just said before . So inside this opening saag we can set the venue inside the double curly braces. The value name of user is going to be equal to the start states. But user down on the very bottom before we can use this in over components, we also need to export this provider inside the curly braces we can export. I will off provider. So if I did this as a named export inside his curly braces since we'll also export a consumer very soon so we could take this provider on also the data which is a user, make it available to the rest of our application over in the app dot Js inside here we can first import these provider at the very top, so import inside the curly braces of all provider and the file path is going to be equal to dot slash This is in the Components folder on the name off of context. So the way we make this data available to all components is by using this as a rapper components let's go down to a browse around, sir. Never Kanaan days inside here. So But that's all the browse around. We cannot This just like a normal component. So this is the name off off provider. This hasn't opening on the closing tag, so we'll take the clothes and tug and rough all of the content inside of this provider. Don't take this down. Just both the browse around, huh? At the scene. And then say this. If we now go over to our application and if we do a refresh, we don't see any content on the screen. This is because it since we've now used this or provider as a rapper, all the components which are now inside no child off these components. Let's take a look at what is going on off in the off context. So inside here we have this off context dot provider, which is providing the value to all off the child components. But this components has no content in between the opening and closing times. And this is why we don't see any content on the screen. So how do we tell react? This component should also rent out all of the components which a nest inside the Abdo Js well can do this with this stock props start Children, which we cannot inside inside the Carter braces. Now get this fire to save and then over to the browser. We can now see all of the components are working as expected. This now leaves was providing the content to over components. So we can now what Set up the consumer, which will go ahead and use this data in the off contact is where we're going to be setting this up. Let's do this at the bottom just after our class. So the first thing to do is to create a constant called off consumer. We're again going to use the off context which was set up at the top here. But this time we're going to grab consumer rob them provider, which we used before, so all of context don't consumer. And then the second thing to do is tow. Aren't this off consumer to our export? So it's available to using of the files. So just before we go and test, this is working in little components. Let's our some initial data to work with. So at the moment, we've got a blank use object. So that's simply aren't a name insider here. So we're contested. Data is reaching the components. Okay, so now I say this in the update Js we're now providing this data to all of our child components using his provider. So now we can go into any of these components nested inside and then take advantage off the consumer, which was created to access this information. Let's do this over in the board components. The first thing we need to do about it off is to import off consumer from all file name, which is dot slash off context, scroll down to the Rendah within, uses off consumer as a rapper to all of our content. So just under return, we can I d no off consumer closes off. Let's grab this. Put this our place and add this right at the very bottom of other content. This off consumer components letter subscribe to any changes inside a contacts. So if the user was updated in the off context file, this would then be passed down to this consumer each time. That is a change. This off consumer takes any function as a child. So let's start by quitting No. All of the data inside off consumer. So put this whole place. I'm gonna have this bucket in just a moment. The mecum passing a function inside of the curly braces. So open up the brackets set up by arrow function. This function takes in any value which is being passed in from the context. So currently, inside of the provider, we only person in the use of on you so back over here in the consumer weaken, passing the user inside of curly braces. Then inside its function body, we can now paste in the content which we had before. So Addison and now all of the values which passed in to the function should not be available inside this cold. We're contest. This is working by are put in this user anywhere inside of here. So let's do this. Just above the board had a inside the curly braces. We can help with the user and then access the name from all objects, save his final oh, to the browser, and then we'll see the name which is being provided from all states. So we'll make use of this data inside his consumer in just a while. But for now, I'm going to remove this name since this is all my work in. So just as a quick recap, we're creating a contact file which has gone to store our user into states. We're going to be grabbing issues soon from fire base. But for now, with hard coded in a volume just below with then set up our off context, which is then got a provider and a consumer. The provider is responsible for passing down data to any child components. Currently, the only value which we're passing down is this use object within created consumer, which then takes in the data inside off any components which needs it. Then over in the up dodgy s, we imported the provider and then wrapped up the whole application with this. So all of the child components have access to this data in the board dot Js within used the consumer, which you created, which then has a child as a function and then passed on this user in trouble cold. So it's available to use anywhere which will like So as you can see, there is a little set of required with context on. This is why it is recommended to maybe only used if passing down props multiple levels. However the wants this set up is done. We can now access his data just by adding in a consumer to any components which will need it. Next, we'll begin to look out using fire base authentication to allow users to sign up and log in . We will use this logged in states and then pass it down to you any components which needs it by a context. 36. Firebase Authentication and set up: we will be using this context ap I. We looked at in the last video pussy currently logged in user to different components. We will be doing this with the fire Base Authentication package, which will, and the ability for users to sign up and log in on it will also listen for any changes and then update our state. For example, when a user logs out, state will then be updated, and this will learn that letters hide any information which they shouldn't see. Another benefits off. Having a long, thin user is. We can also use the user's unique i d when creating a new list board or card. This means we can then filter the data which will get back from firebase only show the items created by the loading user so over to the fire based console we've currently being used in this database link. But we could set up the offense cation just above Go to the signer Mefford, which is this button interest. Yah Firebase provides us with lots of different ways, which we consign in users. We have options to use social media such as Facebook or Twitter, but the one I'm going to add is an email and password combination. Let's go to this. A little click on here enable This never can save using this books in here. The next thing to do is to go to all fire based config inside of our projects, which is the firebase dot Js and then inside the human can also import the off package just like we did above Would fire stole so import from fire base the old package, then below this blow the configuration. I'm going to add a short cut to the off method on install right inside of a constant so blow over database. I'm going to call this constant the firebase off that's that is equal to fire base and then the off method. We can then import this reference into each file which needs it's and then access the authentication methods provided by fire base. Did it this We also need to export this so down in the bottom as a named export, we cannot fire based off to create a new user. We also need a form someone creating new component for this inside of the Components folder . Let's create a new file called the User form doctor. Yes, Those on the sidebar weaken an import react from reacts the size of a class based components called the Use of Form, which extends reactor components. I'm going to set up two different refs, which is going to be for the email and password. So I grabbed the data which the user centers. The 1st 1 is reference to our email input an immigrant, create a raft just like we're doing in previous videos. I want to duplicate this and then changes to be the password. Then create. I will render Mefford which you're going to return our form. We could surround this with a react fragments and then nested inside. We cannot, I would do which is going to have a class name. But I was CSS off sign a brother so other top of going to add a level to head in, which is going to be the tax off signing or create accounts? No, no form which has the two inputs Remember from here we're using the email. Impossible combination so needs and these into old form with great form one day class name off sign of foam We cannot a day which is going to surround each imports. The first input is going to be for our email. We're gonna touch a ref, which we created it just above, which is equal to this start email input on the next line. This is a type of email, also a name which is going to be equal to email and then a placeholder off email to then a second day of just below. Let's grab this section here. Carpets in. I'm looking changes to be the password. So the import he's going to have a raft off password imports, the type of password, the name of password and also the placeholder to your stuff. This dude. We can also add a Putin. Let's create a reparative than a button. Then he thought he the text off sign up only down at the bottom. Let's not forget to export this with the export default with the name of use of home. The sign of form will be the initial components a usable see when they first visit our application so we can add it inside of the router on the home routes over in the opt Audrius. It's first important its components about the very top. So this is called the use of foam, which is available from dot slash components and then they use a form looking at just below down in our router. Currently, if we scroll through all of our routes, we don't have a forward slash route for the home. So can on this right over it all wouldn't great a new route. We consider this to be exact with the file path from home routes off forward slash Any components which we want to rent out is this user form So over the browser, weaken now testes, outs. If you go to our project and then go to forward slash when I see the user form components right, we now have this user form at the root of our project. In the next video, we will make use of this form to allow us to push a new user to fire base 37. User sign up: I will use The form is now ready to be wind up to a method to push a new user to fire base . Since we're using the context a p I to hold all of our user data, I'm going to set this up over in there. Let's go over to off context, doctor. Yes, then at the very top, we need to first imports of reference the fire base or package. This is a named export. So we do this inside of the coat braces. So the fire base off from all firebase package, which is not dot, slash and then fire base. Then we can create a sign of Mefford which will make use of the email and password which will be entered into the form soon. So now down animal class, just below our state objects, we can create to sign up which will be a sink taken in the email on also the password. Then finally, the event information inside a human create a train section and you can also catch any errors. And rather than put in a console log going to come back to this very soon, so at air handling soon. So just above. The first thing we're going to do is to grab the event information and then prevented the default behavior. We can then make use off this firebase off package we just imported above. So we're gonna wait while you based off American call a buying based method which is called Great User with email and password inside of the brackets, this takes in in the email and password, which is going to be past 12 Mefford. And this is all we need to do now for the sign that method, the next thing to do No, have this available inside his file. You started this to our provider as a value. So just below the user that's others onto its online. Not a comma never can also pass down. I was signed up Mefford which is equal to this. Don't sign up just exactly as we would do when passing down props. This sign of method can now be accessed through all the context. A p I. Let's go to a user form doctor. Yes, I'm working on import this off consumer at the very top. Inside the curly braces, the off consumer promo package name, which is that the file path off dot slash and then the off context, just like we did with the ball component need to surround all of all content in this consumer. Let's go down and grab everything from this return section. We can cut this out, not in the off consumer. Remember, from the last video, we said that the consumer needs to have a function as a child. So looking at this just inside So the curly braces it sets of a function and then inside of here, we're going to pass in the sign of Mefford inside the curly braces, then inside his function bodywork, um, paste in all the content which we just removed. So it is now as a rapper. All of this content snow has access to the sign up method on this could be placed in the button as a on click handler. So inside the opening time, we're gonna add on click crazy in line function, which takes in the event information. This is going to ruin our sign. That method. Remember, this takes in the email and password, so the email is available from the start email input, which is our raft dark current the value separated by a common, we can do the same for the password, so the rest was called possibility imports and then grant the Koran value. Also, remember when we set this up in the context, it was growing up. This also takes in the event information so capacity in as 1/3 argument, let's know, save this file and testes over in the browser. Let's create an email inside here, and then we also need to on a password, which is a minimum off six characters. Click on Sign up Oh, to fire base, Click on the user stuff and I will see I will wanna known a user, which we just created. If you don't see any users playing inside of here, do you go back through and check the cold on? Also make sure that the password is a minimum off six characters long. Otherwise you will see an error inside the console. If you are seeing users in this firebase console low, you were no good to move on into the next video, where we're going to look at how a registered user can log in and out 38. Logging in and out: once the user has signed up, they also need to log in and out. We also consider is in the off context as custom methods, starting with it the log in Let's head over to the off context dot Js file inside here under the sign up, when creating new Meffert going to be called Log in. Is it going to be a sink? I'm also taking in the email on password, along with the event information, which we want to pass. When called on this I thought the trying section and then just like the sign up section above, we're going to passing any errors, but we'll deal with this section very soon. Inside the trying section will first go into it, uses event information to prevent the default behavior. And then we're gonna wait. I will for you, Basil. Then we can use the fire base of Vindication Myford called Sign in with email and password . All common case. So sign in. We have email on password and then inside here, just like with the sign up the stakes in the email and also the password in the sign of foam. Just about all this, we're gonna do a test to check. This is working with a console log with the text off logged in. Welcome back to testiness in just a moment. Well, this we're going to ask the log out method said a bowel function, the coming section Nikon section just afterwards. Lesson in the error. Welcome back to you soon. So all we need to do in the tri section is to access the firebase off a nickel, a method called sign out. Once this is done work and then update the states with this notes that states another object on the state we want to update is the user. I'm gonna sit this back to a empty objects again for testing. Looking at a console log which will put a string off, signed out down to the provider. We also need to provide these two methods so these could be accessed inside off the components. So it's a value have log in, which is equal to this dunloggin and then also separated by a comma. We have log out off in the user form components we can then passing or log in Medford to the consumer. So we just have to sign up. You can also add Log in Colonel signed in the user. And now this means we can now figure this log in Medford inside of these components. Are we going to do this by adding in a button just above the sign up? Let's go down to the sign of Putin. And then, just above these, we can also add a new button, which is going to be for logging in just like the sign of below. This is going to pass in a on click event handler, which you going to trigger a Mefford. We're going to pass another event, I don't know in line or a function with the muffin name. Off log in the logging needs access to the email input on also the password input, just like we have below, along with the event information. So I'm going to copy these three lines. Basie's in and in between the ball and tags. We can add that the text off a log in, Say this and then go over to the browser into all projects. When I'll see a log in button that's open up the console looking at, you know, email on possible combination and that we signed up with before we click on Log in. That strange is to be a wrong email looking Logan. We see in every message down on the console. Let's try a different password. Le Guin. We also get a second era. No can answer the correct sign of information like Log in. It never gets. I will come. So log off. Logged in. We will come back to these other messages very soon, so it's a bit more clear to the user what's gone wrong. The next thing I'm going to do is to create a head of components, which is going to display the current logged in user on. This will also be where we can on a log out button. So let's create the head of component now inside. The sidebar on the components wouldn't create our header dot Js. As ever, we import react from react. We're also going to use the off consumer something important. This this will give us access to the users, log in information which we can access from aloft context. We don't need to create a class based components since this has gone too. It's simply taking some information and then runs read to the screen. Let's set up a function based components we cannot. The hate small header elements insider here as a rapper, the off consumer us in the child, which is going to be a function inside the car races. This takes in the user and also the log out method. Sensible Aro function the brackets as a rougher welcome, passing the react fragments. So let's begin at the top left of our application were going toe and a home button, which is going to be a home emoji where the user can click on and be redirected to a home page. Let's have a elements. Since this will be a link, the hatred it's going to be equal to forward slash then inside of the spawn elements were going on and a hate symbol entity, which is the Ambersons, the harsh, then the value of 1 to 7 9 6/8 he said. My colon respond can also have a role which is equal to image and then for accessibility. We cannot a label which is going to be equal to house emoji. Alongside this, we cannot a level one head in, which is going to be for the project. Name off reactor alot Now over on the right inside of his head. Uh, we're going to add a section which is for the user area. We're going to use the context to display the user's email when logged in a button to log out on also the text off. Please sign in which we're going to conditionally render when the user is not logged in. Let's start with the small elements. We're going to display the user a number going to output the user dot email which we're going to grab from context after this, a button which is going to have a on click event handler. This is going to take in the event information and then ruin our log out function and then inside of here compassion e to In these times, we can also aren't the text of log out. And then the third thing we're going to art into here in between the small elements is going to be the text off. Please signing so very simple groups together. The bulletin on the user I will only display these when the user is logged in. When the user is logged out, these will both be removed, and then we'll only on put the text off police signing. So save this file. And now we can import this in the app dot Js So right at the very top, it's import. All had ah, from the file path, which is dot slash components and then the Hedda These components will always show on our application. Therefore, we needs on this outside off the routers switch components. So adjustable switch. And then he had a closes off. Save this. And now we can't reload the browser. Oops. Mills need to export default inside the head. Uh, let's go to that. No. Right at the bottom. So export default. The name of Hedda. Let's try this once more. No healthy had a showing inside the application. Looking. Now try logging in is in the correct information. Get the message over. Logged in. It's trying the log out button. I know we get the message off. Signed out in the next video, we'll be using another firebase Mefford. Listen out for when a user logs in or out and then update the state with the current user 39. Listening for auth changes: when a user logs in and out of our application, we need a way to track this and updates the state by a base providers. Would a method for this called on off state changed? This will listen to any changes to our users. Off status never can update our own state. Doing this will allow us to protect certain views. You know what up, such as the board's view. If a user logs out, we can't attach this listener. Once the components mounts in the off context, that's head over to the file off context or Js, and then we can have this in a lifecycle. Mefford called Components will mount inside here. We're going to access a Mefford, which is going to be called on off State changed inside here, going to set of a function which takes in the user. So if the off state changed has caused the users to log in, the user value was stored inside of this valuable. So we're going to first check if the user is presence. I e. If I have logged in, we're then going to update the state with the corn user value. With this starts that states passed in other states. Object. We're going to update the user so I will use object is going to contain a I D, which is going to be equal to the user. Thought I d. We also need to grab the email, which is from the user dot email, So this cold will be figured if the user has logged in under is used information. If not, we're going to add a L section, which is also going to update the states to be an empty object. When you said the user to be OMT object just like this and we have an error message, don't hear so fire base off just like this, you can also change. I was states just above being empty object Since we know a lot on fire base to control this below this we already providing this user data to over components down as the value scroll down. We have the user and also in the head of components. If we take a look here, we also important this user just here and then grabbing the user's email just below. Let's go over to our project will contest this. So let's try logging out we see the message off, signed out. Let's try logging in good. So not only do we get the logged in message in the console, we also see the user is now being answered into the header. Let's try logging out on the header is also updated. Good. This is all my work in. But now we just need to move this over to the right inside. So to do this, let's go to the head. A doctor. Yes, we can cut out all the use information when great a div as a rapper, place these back in and then at a class name, activate the CSS, which is going to be equal to use area. Say this and it's not pushes our user area. It's the right inside. Good. So we know detecting in the users logged in state on in the next video. We can use this for conditional rendering 40. Conditional rendering: Now that's our up is aware. If the user is logged in, we can use this information to do certain things. One of them is too Aren't conditional rendering which will allow us to do things such as only displaying aboard if it was created by the current logged in user. So just to begin here, inside off the board view, we all put in a signing components. So this is because over in the update, yes, we have a mistake just here. So I'm going to save this just before we go any further. Now, this is in place. We could go to the board. Dodger. Yes. I'm looking at some conditional rendering for the bold components to begin. I'm going to add a new property to state, which is going to be a empty message to begin weeds and then we can update this message. Women can't find a board. All the board has been removed. So let's go down to I work, get bored method, which is just below this inside here. We're trying to find a board by the I d. If no Balkan found rather than the console log, we can update our message in state. So this door said state inside of objects. The property, which we want to update is the message, which is simply going to be a string off board. No found. We can also copy the set state section I'm can also add this down below when we also delete the ball, too. If we say this file and now go over to anyone of all boards such as this ball components here, when a board has been removed or could not be found, we need to hide the ball title, the delete ball button and also the new list at the bottom we can do it is in the ball components by adding a turn the operator based off. If we have a message inside estates, let's go over to the board components scroll down to Orender and then adjustable of old board had a We cannot overturn the operator. Inside the curly braces. You can check this start state don't message is equal to an empty string weaken. Then it set up our turn. The operator which looks like this on that this is just regular Java script. So if this is true, I will just have a empty string inside estates. We can then rent out the header in this first set of rockets. Let's do this by cutting out the closing bracket right to the ends. Scroll down to just after the board had a which is this section here looking. Then it paste is inside. Meaning that's our board header with the delete Barberton. And also the tax is now inside this first set of rockets. If this is false and we do have a board not found message, well can Then I'll put this message inside the second set, the brackets inside of a hate to elements. The message is available with this. What state don't message. So now belongs to the Broza. Let's give this a test. So we now see I were baldheaded section about the top. If we try to delete this board, this now removes the title and also the button leaving us with the message or board not found. We still have this new list button at the bottom, though Elmo could hide this by setting the input type to be hidden when there is a message inside a state. Let's go back to the ball components to our great new list imports instead of certainly time to be text we can. Also, our day jobs group turned the operator inside the curly braces. We could do the same as above. We can check if the message inside estate is equal to an empty string. If it is, we're going to set the input. Saif to be text. If not, we'll set the imports. I've hidden not to say this, but it's cool on board, which we just removed. This is now removed the input type. Let's go to a different boards. Any of these is fine on the new list. Import pistola. So now this complete board components also only needs to display if he logged in. User actually owns it in firebase. If we go back over to our console and into the database inside of all board, we added a user, I d don't at the very bottom this use off ABC want to free. It's currently hard coded one. The create a new board this know needs to be changed too much. The logged in user. You can do this over in the creates board form. Let's head over to there inside of all components inside here. We need to access the Kuerten's logged in user. And to do is we can wrap our components in the often Schumer. Let's go up to the top and then we can import this. So the off consumer, which is going to be available from the file path off, dot, dot slash the components folder, then the off context down to the return section. We can now wrap this in the off consumer. Let's are the components. Remember, as a child, we need to pass in the function which is going to take in the user, which has all the locked in uses, information set about aro function, and then inside here we can quote out all off the rest of the contents, so grab the form all the way down to the closing form tag. Never come pace this inside of all function. So now we have this user available inside its components. We need to pass it to our handle so bit method so we can add it to the board object. Let's go down to our own submit method. We need to remove this start handle, submits and then so can pass arguments with this we can use a in line function. So set up a narrow function, which you can call the start handle. Submit. Calvin is in line will now allow us to pass in the arguments inside the brackets. Sony The event information I'm Wilson is to grab the user Thought I d roll up to handle Submit one doesn't argument. We also now needs passing the use I d. On this used idea can now be used inside off all board objects rather on this hard coded value off ABC 12 free. This user can also be identity to the statement below. Where we check in is the board dot title on Also, the background exists. You can also add 1/3 condition. It's also check if the board but user is available before saving nest. If I your base now, let's say this and go over to the browser. This needs to be logged in Sweden. Grab our unique use, i d. Let's add the email and password, which was signed up. We'd earlier once when it signed in with our email about the top. We don't need to go to the u R L So if we go to our users inside a fire base wouldn't grab our unique use. I d We can then use this open the u R l with forward slash place this in followed by folds dashboards when and taken to the section Welcome creating new board. I'm gonna logged in as the current user. You know this great aboard name. Let's go for test in change the color. Great new bores. I will see if we try to make this new board that nothing seems to happen if we go over to the database and check inside here, which the old board is not being added inside here. Eva, this is because of the way we use i d is stored inside the fire base. Currently, we're checking if the board title background on the user is there before we save this. Well, in fact, the board dot user is not recognized. This is because if we go to off context inside here when the state has changed with an updated or use object, have the i d and e mail at the moment was certainly I d to the user dot i d But if we go to fire base and into authentication. The use ideas actually stole it in a field called you I d. So we need to know Update this inside the context. Too much fire base. Save this over to Iraq. Let's try testing once more. Physical, uh, great new boards. And now this is being added. Let's just like the user has bean recognized inside of all the database inside all testing board robbed on the hard coded value. Now we have our user I d We can now take advantage off this. Use I d property on the board and check it much. Is the current logged in user before render announce or bold components. So back Oto aboard, Doctor. Yes, Inside here. We're going to add a turn re operator lets out this just above all board dropper inside the curly braces would contract with the user dot i d is equal to this Don't state don't current balls, but user, that's about to set the brackets you can Then could the end section silicon rap Powerball components a number in addition right at the very end. So just after our board rougher, which is here, we can paste this in inside l section would have gone to art a empty spun, Since we don't need to render out any content and also to keep react happy, we can also rough this inside of a fragment. So just inside of the user, we cannot react. Don't fragments you open it saag. Grab the closing tag and then we cannot this down at the bottom just after this curly brace . Now let's give this to save and go over to the browser into a bold view. So remember that only testing was created with this current logged in user. The rest all had a hard coded board value economically contesting. They should not work before I any livers. We now see that we just get the Mt. Spawn would know content render to this green as an extra test. I'm also going to test this in another browser with a different logged in user. It's now let's go over to old home components and register a second user that sign up with a second email. But this I'm going to open the Firefox or any over second browser is fine. We can copy our local host free thousands into Firefox. I'm going to know, look in as the second user. So this is one which was created. Look, look in. So now, as a second Richard inside of the original browser, I'm going to log in as the original user, go over to our testing board that's open this. It's not a free copy of the U. R L, which is being created with this user over two Firefox. We can now paste this in it. Enter when l see a blank screen because the user which is locked in there's not much the use of field inside off all board. So this is all working fine. Something else which we need a conditional rendering. Four. Is this header components. We want to group together the use of email on lager button and only show these went logged in, once logged out with, then want to remove these and only show the text off. Please sign him. This will be straightforward since the header Doctor yes, components already has access to the user. From the context. Let's go over to our head of components inside here. We have access to our user inside of the consumer so we can scroll down to our use email and also the button. We can surround these in a fragment, closes off, take the closing tag. And at this just after the button, we can then aren't a turn re operator to check if the user dot i d is president. If it is, we're going to run the cold inside these first set of brackets. If not the cold inside the second set, will the run to grab the clothes and rockets right to the ends. Put this out bases in just after the end of all fragments and then we can grab the small section off. Please sign in and place this in the l section. Save this and we contest. It's over in the browser. So we currently logged in. I will see the longer button on the use email if we click. Look out! This is now removed and we get the text off. Please sign in. We will also back up all the security soon when we are some permissions onto the server. Next we'll stick with a conditional rendering. I only displaying the boards for the current user 41. Rendering boards based on user: inside of this board's view, we could re locked in as this user which ends in N one over in the firebase console of Take a look The board collection My current logged in user, which ends in N one has created this board. If I go down to second Morn, this is created by ABC. You want to free, as is the third on fourth board too. So, inside of our application, we only should see the board which the current logged in user has created. This, of course, caused a problem because a user should only see the boards which they have created rather than over people's too. This home runs already has this user I d passed in as a you are a parameter so over in the home, Doctor. Yes, Components, Let's open this up in the sidebar. We can pass in this parameter when we call the get bored method. So inside of component in mounts we can access this Don't props don't match. Don't Brahms and then the user I d over in the app dot Js It will save this file head over to the up. This method is over inside of this components where we can receive this props as an argument. Let's take a look for the method which we called get boards, which is just here. We don't have this user i D, which were added in earlier. But our president, it's not being used. The first thing to do after the board rough used to remove the get method. Then in place of this, what I'm going to use the wear Mefford, which we've looked at earlier, which will allow us to only get the boards where the board user field much is the current user i. D. So what's the first parameter? This is the board field name which is bored but user separated by a comma. This is the comparison operator which is equals differed one wants Check this against the user i d which is being passed in from the parameters. You can ask this variable inside here. Then we can also chain on the ends the order by Mefford which is going to return the boards in order of when they were created. So we can do this by access in the board don't created outfield and then finally we can call get to pulling all of our board data. Oh, this is Broza. And now we don't see any balls inside of here. But if we right click, inspect an angle into the console would now see the message off. The query acquires an index just like earlier. This is because we now using a more complex Queary so I can now click on this link to create its and fire base. And then, like we did previously, we can go ahead and create a index and then give us a few moments to create. Okay, once this is done, when I'm going to go over to the database, so click on the data tub and then I want to remove all of these boards. I also have a spot, a mistake here where this should be created out. So it also fixes in just a moment to Leslie the collection type in the name of boards. Since the money is created by a hard coded user off, ABC wants you free. Okay, so now let's go to the great bold form on in the board object. You steer, We can I created I just see a So this files. And now the new boards will now have the correct data inside up. Doctor. Yes, we have everything we now need in here. Let's go over to the project. Let's create a new board. Let's call this the course ideas. He's come a blue greater when you board on disappears. Good, let's say to do for the next one. He was a different color, so these were created for our current logged in user. Let's try looking out. We don't have any redirect or other messages set up just yet, but we will handle this in the next video. Now let's go ahead and sign in with a separate user. So contract these boards and not displaying for a difference account so on the email and password and then log in. We also need to grab the I D for the second user. So from a vent occassion, that's ground. The use I d. Now go to a project well with slash basis in and then forward slash boards. And now we don't see the boards created from all previous user. Since he's a filter that down bio user I d. Let's try create in a new board for this one, so test in great new board. Good to know any new boards which we aren't around shown for the user who created them later in the sexual also introduced some security rules on the server. Help prevent this too. Next door, we will improve on the users sign of and logging experience by providing redirects on error messages. 42. Redirecting and error messages: when we look in on also log out, we know by the head up at the top. That's our user status changing, but we also want to be redirected to after we log in. We should be taken into the boards page and a log out should return his back to this log in page. We're also going to add some error messages to when signing in and also logging in. Let the user know if their email and password was wrong or if he uses email is currently taken when signing up over in the off context file, which is the off contact stock Js. We have all of our user related methods inside here. So it's going to be in here where we are that the redirects to use redirect. We need to access the react shelter. Let's go look at the top. I'm looking pulled this from our roads package. So the package name we want to import is with router we have used earlier, and we import this from the React, robbed a dumb then, as we know from early, we also need to wrap his component when exporting. Let's scroll down to the bottom. I'm going to take out off provider, which would export in here Leven, indigenously consumer. Then are they export default just above. We can then wrap over components with router person in the off provider. Save this file and then over in the up doctor es inside of this file about the top. We also need to change the import since it's now eight default export by removing needs surrounding curly braces. With this known place, we could go back to off context. And then first we need to set up in off message into state. Let's go over to all states object. And then, just after the user, we cannot be off message, which we're going to set initially to an empty string. Go down to assign a method once he uses signed in work. And then it redirected aboard u R L, which is made up off the user i d. So, just after we sign in with the email and password, we can access this. The props, the history, don't push the ecstasy, push state off the router, and then inside of the back ticks, we're going to insert the u. R L, which is forward slash then as variable. We can also insert or we use I D, which is available from the start state don't use Ah, I thought I d. After this. We also need to go to follow slash boards. Is there going to be the cut infection blow which receives any error messages? Alma can use the message to set of the state. So inside here we could remove the comment and then we consent to the States on the state is going to be equal to add a message so we can set the off message to be equal to era. Don't message below this. The logging component is going to be exactly the same. The first thing we need to do is to cause a redirect to the users boards so we can grab the line of code from the sign of section. We can then paste this in just after where we sign up with your email and password. You can also catch any other Mr Jews on cities to stay too. With this starts that states, we could pass in the off message which is again going to be equal to error. Don't message down in the Logar method which is just below this. A log out should cause the user to redirect to the home routes which displays the logging components. So just after we sign out and said the state and then also redirect with the push Medford's we'll want to do inside here is redirected the forward slash. Well, this where we catch any errors. We can also set the state, which is going to update our off message. So era the messages the next step Easter at our off message from state to the provider so it could be used inside off components. So just after locals, we can also Arthuis off message, which is going to be equal it ISS don't state those off message. So now I have all of this in place. The component we want to use this is over in the user form dot Js confined to. Since I decide by down and overall of consumer, we can also pass in it this off message. So if there is an off message pass from states, it can be displayed it just above the form Let's go down to a form with the class off sign of form. We can then add a term the operator inside of the curly braces. Where would check if there is a off message? If there is going to put a spon elements, which is going to our put off message inside of the curly braces? If off messages falls, this means that no, my suit has been said the state. So just after the colon, we can simply set this to be an empty string. So now let's say this oh, to the browser and into a sign of components. We can first testes with a wrong email and password to check. Our message is being passed to this components. Let's try and error inside of the email with the correct password. Open up the console. Let's try to log in. We'll get the error inside the console and also the error message on the screen, letting the user know that no use the record has been found. Let's try out in the email incorrectly removing a digit from the passport log in. We can Sierra inside the console and then the updated message on the screen. Let's correct this and correctly log in, which then re directors to the board view also passing in the user i d. Meaning we don't need to type this in each time. Will again. Let's also remove this user i d from screen since no longer need this. This was added off in the home components to go to the home doctor. Yes, On this take a look for the spawn elements, which is right at the top here. We're gonna move this. So another case we can handle is a logged in user returning back to the home route. It's now currently will logged in and then click on it. The home icon wouldn't taken to the sign of page. If we on this page and we also logged in, we no longer need to sign in or create an account. So instead, what we need to do is our day. But in which is going to redirect the user back to the board's view, we can again make use of the turn The operator toe only show the form. If there is no user logged in, let's do this over in visual studio code. Let's go to the use of foam. And then he did with the class off sign a proper So just above this. We're going to again use the eternally operator to hide our sign of form if the user is logged in. So the first we're going to do is to track if the user i d is not present so we can use this with the exclamation mark. Jack is the user dot i d is not currently set. After the question mark we're going, then open up our brackets. We can then erupt the rest of all, sign of proper By taking these two and in brackets, call these old place and then scroll down to the closing div right down to the very bottom , just after work clothes and reparative. We can paste this in. We can. Then after the second condition, just after the colon open off the brackets and then this is the case off. If the user is logged in, we're then going to output a button which will redirect the user back to the boards. Let's start a hedge mill button inside here, a on click event handler which you're going to trigger and in line function. Let's set up a narrow function inside here, which we're going to create in just a moment called redirect. Redirecting is taking the user dot i d and then the tax between the opening and closing elements, I'll go to my boats. So this turn, the operator will hide the form if the user is not logged in. If the user is logged in. What ain't going to render a button? Which, when clicked, is going to redirect the user? To the board's view, Do this. We need to create this redirect method. Outside of all, render. Let's go look great. I will redirect, which takes in the use I d set a bowel function. I'm the only thing this redirect method is going to do is to push to a new U R L so you can access the stock props. You're history. Access the push Mefford inside the box takes we can redirect to forward Slash are, you know, available, which is going to be used. I d. And then forward slash boards. Let's save this and go over to our project in the browser. Since we now logged in, we can now click on this button off. Go to my boards and this will end redirect those 20 use i D, followed by the balls. Good. So as a final redirect for this video, we can also work with the home emoji open the header. This always things to the home route. But when he uses logged in, it would be better to link to the users boards. Let's go over to a header, doctor. Yes, on that scroll up to our link, which is our puts in our emoji. So as a hate Ralf instead of this forward slash I'm going to remove this aren't in the color braces so we can make this dynamic. And then inside here, we can also make use off eternally. Operator the check if the user dot ideas presence if it is inside of the back ticks, we don't want to again redirected the boards, which is forward slash with then passed in the user dot i D, followed by forward slash boards. Just afterwards, we can also add to the else condition and then redirected the fall slash route. If the user is not logged in, let's try this out. If we know save over to the project we now logged in its let's click on the Emoji, we redirected toe aboards. If we know log out wouldn't take into a sign of foam anise. Emoji will still re directors to this home routes. So these user redirected something which will really benefit the user when navigating around our 43. Roles & permissions: Now it's time to add some security reels to our database, showing on hiding things on the front end when he uses Logged in. It's fine for keeping the user interface looking as it should, but we also need to set up oh, back and security, just in case somebody bypass disease by creating a fake or modified request. This means the database will only send data when the user is locked in and only show the cards. Listen boards if they match the current user. I've gone ahead and removed the lists and cards from all database to give us a clean start for this video. Since we're going to be adding a new field, the new field we're going to be adding is going to be just like the boards where we added a user I d. So we're going to begin over in the board dot Js components where we create a new list on inside a here will create a new list. We could make use off this user, which is passed in violently context. So to do this, let's scroll down to a form on on the on Submit Mefford record. Nicole knee create new list method, so I'm going to cut this out and then add a in line function insider here, which is going to take in at the event. Information. I didn't listen. Line will allow us to pass the user i d. When call in this method. So Conard back in, I will create new list Mefford person in the event information on also the user dot i d. So how would this would go off to create new list outside of the Render, which is just inside of here? So we could only receiving the event information. We also need to receive the user i d. As a second parameter just after our events number may create a new list. We want to aren't the user field, which is going to be equal to this user. I d. On the same fall adding a new car, too. Let's go to the list, Doctor. Yes, components inside. He will currently not using the context. Let's begin by important the off consumer at the top of this file, let's go up to the very top. We can import off consumer from the file path, which is dot slash then off context scroll down of economic use of this off consumer component to rappel code inside of the random effort just after return Crazy Ball of Consumer, which has an opening to closing tag. Then we increase our function, which is going to be the child passing in the user inside of the curly braces instead of the rest of all function. And then we can grab the rest of our cold from this div with the class of list. Let's grab all of this all the way down to the clothes and death. We can cut this out and then paste is inside of all function. So no, have access to the user via war context. If we now scroll down to where we create a new card, weaken, do exactly what we did in the last video. We can cut out of a current method from the on submit working on passing and in line function, taken in the event information calling, create new cards and then passing in the event information and then also the user thought I D, which was passed in from context hoping correct new card. This is going to now receive this use I D composites in as the second arguments and then just after created at, We can also add our use of fields, which is going to be equal to the user I d. So with this known place, we could give us a try over in the browser. Let's head. It was all projects. Um, we can create a new board. Let's just go for a be and also look out. We can now sign in with a different user we now redirected. That's at sea on also D. So now this is going to leavers with various boards for different users. We can also add that some lists and cars to test this out to and in fact, we want to go to one of the boards which was created. Let's go for a C. So 12 free, not some cards inside here. Oh, to the console. That's now refresh and take a look at our new listing cars. Let's go through it all counts to begin Weeds. Oh no, Have the user. I d lengthen these. That's respect the list to work into on these are all working fine. So now we have these user fields we can add our missions. Let's click on the rules tab on my consent thes inside of the database. So click on this. The's default rules will allow anybody to read and write to our database, regardless off if they are registered or not. Biased or will allows too much documents or collections on also set up rules for each. When reading, creating, updating or deleting data, we first have this surrounding outer much, which will point to our database documents. You can think of this as a file path to a database. These curly braces, which we have insider here, are basically variables which can change, such as the documents I D and then nested inside. We can specify certain documents or collections which you want to secure. This example is pointing to all of the documents in our database, so it's a pretty general rule. Then, inside he we allowing anybody to read and write through a database. And of course, this is not very secure. So I provided with this course a set of rules which you can use to replace these under. Have these available on my desktop? So I'm going to open these up. This is a text file if you haven't done so yet. Go ahead and download these from the course. I'm going to copy all of these. Go back over to a database. Banana pasty is in place looking. Then hit. Publish to a planet used to our database. So these rules are broken down into three sections. One for each one of our collections. So we have the march section, which is here, where we're going too much. All the documents inside of all boards collection. We also have the same for the lists on also over cards nested inside of here. We have various rules for when we want to read data, create off day data on also delete anything from our database. Two things to note here. When using these 58 rules, we have both a request which you see here on a resource object, which we use quite a lot inside of these rules. This resource object contains data which currently lives in our database. So just here, where we're grabbing at the board and then the user field within half. The request object, which is just here on this request object contains a off object nested inside, which holds information about the current logged in user. So this line of code is checking if the current logged in user much is the user I d linked with the board. If it does, it will allow the user to read from the database. If there is no much the request will fail on, the user cannot read the information which they are requesting. Next. We have some rules for creating or dating the board. They could be also kept separate, but in our case, that will contain the same set of rules. So I have grouped them together. We said before that this request object contains the incoming data request also has a resource object to which we use in here on this contains the data were sending when creating or dating old boards. Access in. This will allow us to provide it some validation to check that their data is formatted correctly before saving. So here we check in. If the balls title is a string, we check in with the background of string. The created outfield is a time stamp un also checking if the user which we've added to the board object is also equal to the user which is locked in, and then we only allow users to actually delete aboard if the ball was created by the current logged in user. Everything else below is pretty similar. We set up a similar set of rules for cards on Also, our lists toe. Also execute with these two, So setting up all rules is not too bad. Once we understand, we're just often comparing what we're having. Our database using the resource object with the data which is coming in, and this is available from the request object. So now if we publish this and gold, 12 projects click on the whole Maikon. So I'm logged in with one user on. We can still see the boards which were created. Let's open up a second browser with a different user. If we refresh, we see the fire base still allows us to access the boards created by each user. We can also go into each one of these. Let's try and checking for a listing cards that's trying to lead in information on this is all working. We can also test that if we copy a link, someone logged in user paste this in to a different browser that we know allowed to view the board information. So this is now added some buck insecure to to our application, along with some front end checks to keep the user interface in line. You can, of course, add more complex reels to fire base, but these are a good starting point only allow logged in users and also the boar creators to view their own data. 44. Building for production: Once we happy with our application, it's time to create a build for production. Let's begin by going over to the package. Jason in the sidebar, Open this up. If we scroll down to the script section, which we have just, uh, we've seen so far using it the star script for development. And there is also a build script, which would have just below to build our up for production. Let's do this inside of the terminal. I'm going to open up a new top inside the terminal and then there only spoken run MPM room build and then set this off. Give us a few moments to go ahead. I'm built for production, and I'll see you in a moment when this is all done. Once this is done, if we know open up the sidebar. You know it's inside of our project will now have a bill folder. This contains what we need to deploy our up for production. It strips away anything we don't need, such as any development. Every messages on independence is we have built our application using lots of jobs, give files of pages on components inside of this build folder. There will be bundled together so we don't have to make a separate request for each file. It will also do the same if we have multiple CSS files too. Well, consider this if we open off the static file inside of here. We have a CSS on also a job script folder on its inside of here, where all files are bundled together inside here for our jobs. Good point. For example. There is quite a few bundles which is split up on have numbers in the file names for cash in purposes. The file name it would main inside of it, which is this one? Just here is our application code, which we have wrote. If we open the soap, you may see certain parts of our application which recognize So for example, if we had in here that states, we have always said Stay call where we set these selected labels. If we keep going for a little code, we have one for open up the motile. So we see references to our code, but this is compressed on formative for production. Inside the sidebar, we also have files, beginning with a number such as these ones just here on. This is often 1/3 party vendor code, such as any node modules we've include is and these are crushed separately for performance , then the runtime file names which will have down at the bottom. These are some Web barcode toe load and ruin our application. We still have our main index dot html file, which is now pointing to our main jobs. Good file. Inside of the build, let's go across to our script. This is now pointing to our jobs. Could file, which is inside of a bundle on. This is the main file which we looked up before. So now we have this bill folder inside of our application. We're now ready to move on to the next video on deploy our up to production. 45. Deploying to Netlify: There are lots of hosting providers out there. What's really popular and easy want to go on with is notifying, and they also have a free option to use to. We can quickly get our site online using need net. If I see a lie, which will give was a set of commands to push our application, it's a production. We could do this over in the terminal using MPM. Let's head over to well terminal on Rooney code MPM install. Notify Josh CLI and then dusty to install this globally. If you see an error when doing this, you might also needs Aren't the pseudo keyword before this to install as the administrator ? One cc ally is installed for you broken then it 11 of the commands which is provided called nullify Deploy. This will open up in the browser where we need to create an account if you don't already have one. So now we have some options What would like to do next only to great and configure in new site by using the open donkeys and then hit Enter. I want to enter through this team. Name this completely fine. What can then choose a unique site name, or we can leave it blank to get a randomly generated name, which I'm going to do. I've used the Net if I see a lie a few times before, so if you have not used it in the past, you may need to take into the browser to log in. Also authorized the application. The next thing we need to do is to tell, Notify where or Build folder is located in our project. This is simply the bill folder saw this in before we make this available for the world to see Net. If I will give us a draft u R L, which is basically a test side for us to see if everything is working first. Let's first begin by copying at this draft. You are well, we can copy this or commanding click to be taken to the browser, and he will contract if everything is working. Okay, let's sign in. Give us a test. We taking 12 boards. Let's try some of these. We also have a list on our cars appearance, so this all seems to work in fine, however, though, if we now click on this home icon in the corner. Well, then get an error message off page not found. This is because when we click on this home page link in the corner, we then trying to link to a U R L, which ends in forward slash we use i D and then forward slash boards. However, we don't have this route or this link set up in our up. All of this is handled on the front end using the router. The solution to this one using a single page application, is to tell the server toe always only return the homepage, and then we'll handle any routing on the front end. So when this is pretty simple, if we go back over to our text later with simple needs are a underscore redirects file to old build directory route. So open up the build folder, create a new file inside here, which is going to be underscore redirects. All we need our insider here is a forward slash a star and then forward slash index no hay html 200. Save this file, and this will tell the server toe. Always send back the index dot html page on also a status code off 200. So now, with this in place, if we go down to a terminal, we can once again run, Notify, Deploy. Send this off. It will also ask us for the deploy path once more, which is just simply build. This will now build our application. Given us a live test you are l So you can click on this? I can try looking in. This is fine. Click on the home icon. So once we're happy that everything is working as expected, we can now push this to production. We can do this. Would one more command down in the terminal? On this is notify deploy and then dash dash broads, which is short for production. Also, we need to pass in the bill path and this will now give us a life. You are a which one click on open up in the browser And now we left with a live link for project on the web, which you can now share with others 46. Thank you: Congratulations. You've reached the end off this class. Thank you for rolling on the Hope you've had fun learning all about what react is on how we can use its build applications using Josh Smith while building our up. We've covered quite a lot of ground starting at the beginning, where we look at the basics, such as setting off our components, life cycles, methods and props, working with state on prop validation. Then we moved on to using forms and imports. And how react uses both controls on gun control components for different situations we use is also need a way to navigate through all pages. I'm were then moved on to solving these using front end routing, along with over solutions the router provided, such as Rob the props and state Bush. Medford's on you borrow parameters. React only covers the front end off our project, though, so we often need a back end service. To this. We hooked up by your base to get was a real time database, just all boards, lists and cards, along with learning all about creating, reading, updating and deleting data along with various firebase methods on user authentication services. Finally, we built our after four production on Deployed for the rest of the world to see So we hope you've enjoyed this course under look forward to seeing you again in a future class.