 Hello everyone in the previous video we talked about how we can link the cloud firestore back-end database to your front-end react application and how you can read the data from the database and display that in the react application. So in today's video we take a look at how we can implement the functionality to create new records in the existing databases with the new button here. So right now we have a very simple html button here that does nothing when I click on it. The code for this button is actually written in the previous video so if you're following along you'll do just fine and this code right here is just a continuation from the previous video so nothing's changed about this code it's the same code but before I dive into the code I want to just acknowledge a comment here from Perag Barosar. So Perag says that you press control and the plus button to increase the size of the console window which is a very big issue that I had in previous videos so I had this really small console text and those of you on small screens can't really see what's going on so now I can just you know zoom this in so thank you Perag for telling me this now I'm going to look at the code here I'm going to see what has to be done here so let's think about this we want to create a new record in the database by clicking on this new button here so the first thing we're going to do is go look for that new button so the code for the button is right here button class name equals button new so we want to make an api call when someone clicks on this button and we detect the clicks by using on click so on click equals to handle new handle new is going to be our api call function that I'm going to write right here const handle new equals to an arrow function and I'll make this arrow function asynchronous because we're making an api call so whenever you make api calls you always either want promises or async await so there are actually few methods that you can use to write new data to the firestore database I'm going to show you a few today and the first method is going to be using set doc so set doc is a function that we're going to get from firestore to set a document and that is why we're going to have to import that from firestore so import set doc and set doc takes in two arguments first is going to be the document reference and next is going to be payload so the payload is where your data actually goes and the document reference is telling firestore where in the database should we put this document and of course I'm going to do await here so if you have any code down here it's going to wait for the api call to finish before running so that's why we are using async and await here so right now we haven't yet specified the document reference and the payload so let's go ahead and do that const doc ref equals to a document reference the way we make document references in firestore is by using the doc function and this is something that we're going to have to import from firestore as well so be sure to import that and it's going to take in three arguments the first argument is going to be a database handle which is what we have been importing from firebase all this time so dot slash firebase is this file which we export default get firestore so this is something that we've done in the previous video we're just going to write the database reference the handle here so db then next is going to be the collection name so the collection name is called colors because if I look in the console this is the name of our collection colors it's why we're putting colors in here so the database handle and then colors which is a collection name and a third is going to be the document id so let me show you what the document id refers to you can see here we have three documents and each of them represents red green and blue individually and the random string you see here that's the id so each individual document has a unique id and the way I generated this was when I create a new document I just click auto id and it's just going to give me a random id so in this case let's just set this id to be color 001 and this id has to be a unique id and the next thing I'm going to do is make the payload so the payload is where our data actually goes it's going to be an object and then we can say name name let's call this black and then value so the value of the color is going to be hash 0000 because that's the value for black and I'm using name and value here because if I look at the console each of the colors are going to have two fields which is name and value that's what I'm creating here I'm creating a color called black I'm just going to come here to my react application refresh this and let's just click new so what we expect is to see a black color appear here that's exactly what happens and this is not just a local change either because if I look at my console you can see color 001 appear here with the name of black and the value of hash 0000 so you see that that's the id that we're setting here and then that's black the problem here is that if I already have a color 001 here with a different value let's say we had a different value of pink then the value is going to be f0f so what if we already had a record in our database with the id of color 001 and I come here and click new it's going to override that existing value because that's what set does we're using set doc so set doc here we're overriding the existing document if it exists if it doesn't exist set doc will create a new document and it's all dependent on this id that you're putting in here in the document reference if you put in an id that doesn't already exist in the database it's going to create a new document and if this id already exists in the database then it's going to override that existing document and there are ways to modify it so that we are just editing the data and we're not overriding the entire data itself and that's what i'm going to be showing in the next video that's when we actually write functionalities for the edit link here but right now let's just focus on creating the new colors there are a few issues with the way we're coding this at the moment so the first issue is that when we create new we're just creating a new predefined color which is black that's not what we want we want to create a custom color let's say i want to create pink i want to be able to create click on new and write pink and write in value for pink and should go into the database here the next issue is that i don't want to specify a color here on my own right i want to use this functionality here in the console which is auto id i want firestore to generate the id for me i don't want to write that id myself so the way we're going to do that is that we're going to use a different approach so set doc can be very useful if you're going to override existing documents or if you want to edit existing documents and change the values which is what we're going to be talking about in the next video but there's another way we can do this if you want to just auto generate this id and not pass this in so that's by using something else called add doc so add doc here is going to tell firestore to generate an id for us instead of us having to manually type that id in and i'm going to get rid of doc here because we won't be using that anymore and i'm going to get rid of this entire thing we're no longer using set doc right now what we're going to be using is we're going to be using add doc so add doc looks like this similar to set doc add doc takes in two arguments as well i'm going to write them side by side so you can have a comparison in set doc you're going to have to pass in a document reference a doc reference and a payload and in add doc you don't pass in a doc reference instead you pass in a collection reference because you're adding a document to the collection because you don't have to specify a specific document id you're just telling firestore which collection do i want to add this document to then next is going to be payload so collection reference and payload and set doc uses doc ref and payload so you're going to be very careful here you want to put the collection reference here in your add doc and not your document reference so the reason i'm pointing this out here is because i've noticed that this is a very common mistake that people tend to make so if you have an add doc function here and you pass in a document reference in as the first argument you're going to get an error uh just like corner here you're going to get an error because you're supposed to pass in a collection reference you're telling firestore which in which collection do i want to add this document to all right so let's get rid of set doc here so we can focus on our add doc i'm going to add a weight and let's make collection ref previously we added doc here right but that's not what we're going to be doing here because we're targeting a collection now and this has to be imported from firebase slash firestore as usual the first argument is going to take in is the database handle which is what we're importing from firebase and the second argument here is going to be the name of the collection which is colors and collection is not going to take in the third argument here unlike doc we're not going to take in id here so just leave it blank we only have two arguments here the database handle and the colors and let's make the payload now the payload equals to an object that takes in the name of black and then the value has to be hash 000 let's save this and let's see if this works so what you're going to notice is that we're not specifying an id here we are not saying color 001 that's not what we're doing so we're going to leave it up to firestore to generate an id for us and i'm going to go to my react app i'm going to delete this black existing black color from the console and let's create new so you see black appear there and do you see that the id is automatically generated it's no longer color 001 but this is still not what we want right because we don't want to hard code this black here we're going to create our custom colors i'm going to create pink i'm going to create purple so i'm going to use basic javascript prompts which means i'm not going to be using complicated forms and complicated input fields so cons name equals to prompt and then semicolon so ideally we're going to get rid of this hard coded values here we don't want it to always be black and 000 i'm just going to clone this down and change this to value so enter color of value and then we're going to replace black with name because name is what we're getting from the user the prompt right and the value is going to be replaced like that here you can see that you have duplicates here the key and the value have the same variable names so in the es6 syntax in javascript es6 you can just get rid of that and just do this so now this should work and when i go to my browser let's hit new and you can see this prompt this is the prompt that we coded so the color name is going to be pink and then the color value is going to be hash f0f because that's the color for pink and we see pink there so this is our final version here we can create more colors we're going to create another color we can create ff0 so that's actually yellow and then you can create more colors that's that's going to be 0 ff so we have cyan we have yellow we have pink but there's one last thing that i want to show you before i end the video so here we're using ad doc right we're not using set doc so the document id is automatically generated but what if i wanted to get that id right after the document has been created so there's one way you can get the id when you're using ad doc so instead of just leaving a wait ad doc in the middle of nowhere like this we can assign that to a variable we can call this document reference so doc ref and then now that we have doc ref we can do console dot log doc ref dot id so that's going to give us the id of this newly created document the new id is and then concatenate that with doc ref dot id and let's look at that in the console here i'm going to refresh this i'm going to create a new color blur and then let's set the color value to be ff0 and our new color is created here and the new id is displayed in the console so this is the way you can get the id which is right here so this is the id of the newly created color so ideally when we click on edit here i'm going to edit this another color name to become yellow right so i should be able to click on edit and you know it's going to prompt me and i can change the name from another color to yellow so that's what we're going to be doing for the next video and in the next video i'm going to show you more how you can use set doc to edit existing fields and there's actually a way you can use set doc without overriding existing values so that's what i'm going to be showing you in the next video and also i have a request here if i look at the comments from ian so ian says that i should make a video on firebase authentication with login profile pictures and whatnot so uh that's going to be the next few videos i'm going to make for this series so that's it for this video hope to see you in the next one