How to set up React with Firebase/Firestore v9 (Part 2 | addDoc)

[@biradon4444]

Thank you so much for your video, this is straight forward and easy for beginner like me to make my first step to connect React website with the database

[@conorcoder7196]

Wow, these videos have saved me tonight. Thank you!

[@tiedsergosu7715]

Bro don't be lazy, these tutorials are what can make your channel explode. Keep making them, we're waiting for the sequels! Great content.

[@ravenjs]

thanks @Sergosu! more will be coming this weekend :)

[@hooho491]

this is my first time learning firebase, you explained everything very well, thank you so much!

[@rajthapa9006]

you have the greatest firebase videos. other videos on youtube are outdated yours is the one working for me

[@ADIYR]

always find a solution if you go to this channel, thank you bro, success always

[@danielodiase6824]

I never comment on anything on youtube but youtube needs to make your page bigger . ive been looking for an uptodate firestore video and this video helped me so much . Keep on going .Thanks !

[@ravenjs]

thank you so much @Daniel

[@joel_mathew]

Dude this is fire🔥🔥🔥🔥🔥 I was looking for a firebase firestore tutorial that is precise, up to date, simple to follow, and not 3 hours long and God blessed me with this firestore series please make content like this. Congratulations!!👏👏👏👏 You have earned a new subscriber.😃😃😃

[@ravenjs]

@Overnight Creator this is amazing HAHA thank you so much for the praise, so happy to hear this :))

[@MrCuteguylol]

Holy shit this channel is a life saver for new users trying to use firebase v9!

[@ravenjs]

Haha thank you @Asad

[@MrCuteguylol]

@@ravenjs thank YOUUUU sir

[@suriya7646]

This was super easy to undestand. Waiting for the next video.

[@ravenjs]

thanks Suri :)

[@2029leandro]

This is so great and easy to understand, and up to date too!

[@ravenjs]

thx 2029leandro :)

[@kushalshukla444]

Btw thanks for all , I was stuck in this problem from last 3 days and u sort it .🥂

[@ravenjs]

@kushal that's awesome 😎 let me know whenever you need help next :)

[@kushalshukla444]

@@ravenjs 🤜🤛

[@rafaelsoteldosilva]

Hi!. Thank you for these great lessons.

[@jeriahcolasino7588]

youre the best dude.

[@gauravsaini9186]

This is just what I needed for help, thank you so much!

[@ravenjs]

I'm glad it helped @Gaurav!

[@krishnamuraree2662]

Thanks man this video saved my hours😃

[@ravenjs]

that's amazing :))

[@IanMont]

Great tutorial!

[@ravenjs]

Thanks Ian xD

[@coderchic]

This was super helpful. Thanks!

[@ravenjs]

thank you @Rose!!

[@hirosyee]

Awesome!! I want to see how to get specific document with unknown id, and I hope you have already provided after this lesson. Thanks,

[@shaheryartatari864]

amazing work man.

[@catreunion]

thank you so much for giving us a great tutorial!

[@lrajoo11]

amazing stuff! super clear

[@ravenjs]

thanks! :))

[@mcdaddy1334]

VERY NICE!

[@ravenjs]

THANK YOU :))

[@VladiGuitar87]

Thank you so much for your work! I learn React in a course on udemy and their teach this topic not so well and partially in a deprecated way. Your channel helps me a lot!

[@ravenjs]

Hey @Vladimir I'm flattered haha thank you so much :)

[@brendanhurd81]

I have a feeling I have been doing the same course and its been a nightmare.

[@VladiGuitar87]

@@brendanhurd81 haha 🙈 The complete react developer 2021, this one??

[@brendanhurd81]

@@VladiGuitar87 Bingo!!!

[@magdolnakatay6158]

Thank you so much!😲

[@ravenjs]

You're welcome! :))

[@arkindustries7347]

Not finished watching but i want to comment first . Thanks in advance . I know its gonna cool 🙂

[@ravenjs]

haha you’re cool too :))))

[@arkindustries7347]

@@ravenjs done watching dude, its really cool . And excited again for next . Authentication feature of firebase is i want to learn next and now you implementing it also . Thanks again , Keep it up

[@IanMont]

@@arkindustries7347 I also want to learn the auth feature and also implement it with a profile picture uwu

[@yashtripathi313]

Really helped!! Thank you for this awesome content @Logicism

[@ravenjs]

thank you Yash!!!!

[@henrydj3220]

Very easy to follow thanks for the content! LIKE THE VIDEO PPL

[@ravenjs]

YES THX @Henry Dj haHa :)

[@Tony-jr3ki]

Hey! Great video, thanks. But how can you make colors display in order? And why do they appear the way they do?

[@ravenjs]

Hey Tony! You can definitely make the colors display in order. The catch is that if you want to display the order by creation date, you'll need to create a new field to store the creation date in Firestore and write the logic for that because Firestore doesn't store timestamps by default. Or, if you just want to order the documents by name, you could do something like this: import { collection, query, orderBy, onSnapshot } from "firebase/firestore"; const collectionRef = collection(db, "colors"); const q = query(collectionRef, orderBy("name", "desc")); // Return unsub to useEffect() to terminate listener when unmounting const unsub = onSnapshot(q, (snapshot) => { // snapshot.map( anything in here ) }); In my example there isn't a specific order in which the colors are arranged because I didn't specify an order in the query.

[@Tony-jr3ki]

@@ravenjs great! Thanks! Looking forward to the next video.

[@ЭрикАрутюнян-х1к]

Continue I'm waiting for your videos

[@ravenjs]

I will, thx for your encouragement haaha :))

[@ЭрикАрутюнян-х1к]

@@ravenjs I really waiting)) I have a project to create the Slack clone, you r the one who have updated firebase information

[@ravenjs]

@@ЭрикАрутюнян-х1к sorry have been busy lately but I promise you'll get a new video this weekend :))

[@ЭрикАрутюнян-х1к]

@@ravenjs Thanks a lot

[@oliverblackofficial]

Hi, cool Video! I have a question. I am using an input field to get the user input and it works fine to add it to a collection. But i takes a few seconds until it renders on my page, do u know why? I am using useState and useEffect the same way u did in your video

[@ravenjs]

hey Oliver! I've noticed that this phenomenon is quite common if you use id=Math.random() in the React component. Are you doing something similar? If not, perhaps you'd like me to take a look at your code for you? You can put a short snippet either here or in pastebin :)

[@Froylander]

Hi, how i can add a subcollection ??? i try this code but, i have an error... const collectionRef = collection(db, "chat", userSelected.id); await addDoc(collectionRef, user.id, objMessage); I want to add a document called like the receiver user (userSelected) and inside a subcollect called like the user (me) id, and inside a document with the message.... but I cant :(

[@ravenjs]

could you show me the actual error output message?

[@MrFlaviutz]

Great videos! How can you get data from one document? for me singleData doesnt have the data const singleData = await getDoc(doc(db, method, singleIdentifier)); console.log(singleData)

[@ravenjs]

Your variable 'singleData' only stores the reference to your document in the database. You'll still need to singleData.data() to get the data from the document reference. So it'll be console.log(singleData.data()); Also, you can do singleData.exists() to check if the document exists in the database.

[@_MoshikoAz_]

based on what you've said in this video, is that we don't have to specify an Id property in the collection, since firebase does that automatically for us ?

[@MrCuteguylol]

Hi! I would like some help. Im building an app (POS) on react firebase. I need to do 2 things which im unable to do. First, whenever i push an entry (using form or something) into firebase i need firebase to create an id. (i know it makes u even showed it), but i need that ID dynamically INSIDE my pushed obj like {...obj,id: 'id'} because my issue is that i can't use that auto generated id in my data that i get from server. Secondly i need to perform this authentication. Where whenever i send my data to server, i want that some of my fields should remain unique. I have been trying very hard to do these things but i cant :'(

[@ravenjs]

Hi @Asad, i don't think I understand your first question quite well, could you elaborate on the part about having an ID that is dynamically inside your pushed object? is it that you want to get the ID before pushing the object to the database? also, for the uniqueness constraint, it's a bit more tedious to enforce it with Firestore. Unlike MySQL or Postgres, you'll have to manually perform the uniqueness check with your own code. For example, you could use queries to check if the value already exists in the database

[@MrCuteguylol]

haha actually i saw that u somehow did it yourself (i accidentally missed that part) using doc.id. Second question is a bummer. I dont want my forms to be expensive on the frontend :'(

[@ravenjs]

​@@MrCuteguylol yea it's really a bummer.. :(( i guess having the convenience of not needing to write an API like a rest API or even GraphQL comes at a cost heh worst case scenario: you could try and learn google cloud functions to do some serverless processing but that's a whole new topic

[@BillyLegumbres]

excuse me I got this error when I try to apply the steps that you show us in this vid "Uncaught (in promise) FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore" and I'm not sure how to get around it

[@danielodiase6824]

please make a video where i can get the input to show at the top, preferrably with a timestamp method . Thanks !

[@ravenjs]

do you mean an input field to replace the javascript prompt?

[@danielodiase6824]

@@ravenjs I mean just to be able to organize the prompt value based on time stamp . I saw that you covered it in later videos . So this was answered . Thanks for ur hard work

[@mageshyt2550]

bro how we can set custom id when we add new doc.

[@ravenjs]

use setDoc instead of addDoc

[@mageshyt2550]

@@ravenjs i founded already anyhow thank you so much for your reply 🙂

[@mixai7]

how upload photo to firestore ?

[@ravenjs]

for uploading photos, you might have to use cloud storage instead of just cloud firestore :)

[@thetransolutions]

i want to add with custom id not set. how can i do that

[@ravenjs]

Hi The only way is to use setDoc(), because addDoc() is specifically for if you want Firestore to automatically generate a document ID. Apart from that, setDoc should be able to do everything else if you want to create a new document with it.

[@kaushalkumarmishra9201]

Plz make admin panel tutorial...

[@ravenjs]

@Kaushal I will! But I think the admin panel will be in its own seperate series. thanks for the suggestion Kaushal

[@gigxr]

whoever encounters error "Uncaught (in promise) FirebaseError: Missing or insufficient permissions." 1. go to rules in Cloud Firestore 2. in "allow read, write: false" , replace it to allow read, write: if request.auth != null;

[@ginvgin]

Not all good devs use macs :)

[@ravenjs]

Hahaah thanks for the compliment Gin AHAH :)))

[@JacksonRossi]

If you want a randomly generated ID (so that you don't have to make a unique identifier each time), you can use add() as opposed to set() import { collection, addDoc } from "firebase/firestore"; // Add a new document with a generated id. const docRef = await addDoc(collection(db, "cities"), { name: "Tokyo", country: "Japan" }); console.log("Document written with ID: ", docRef.id);