How to Create Nested Collection in Firebase with React

hello everyone in this video I'll show you how to create a nested collection like this and take this using Firebase here we have main collection inside the main collection we have one document its name is language these are all sub collections okay see JavaScript and this react this okay inside the C we have an ID and inside the ID we have title and title value and yeah Hamilton store value in this initial collection and get value in this restaurant collection okay let's start here I already created a react project and also in running this project I'm going to create a form and this is name and yeah this is title and after that I'm going to create a button and its name is ADD here I'm going to add a Break Tag and yeah I want to create on submit and here I'm going to pass the event and handle add and here I'm going to pass the event and after that I'm going to copy that function here I'm going to create a function and I'm going to get a event value and here I want to pass to prevent default okay default after that I'm going to create a Firebase so go to firebase.google.com and click get started and I'm going to choose this Firebase dot YT in your case click this add button and create a Firebase project okay when you're creating a Firebase project you will get a code like this and before that you need to install this package okay so copy this and in my case I already installed that Firebase and I'm pasting that code inside this Firebase dot JS file and here into here I'm going to import Air Base and fire store okay and here I'm going to you should get firestore okay and here I'm going to copy this after that I'm going to create a variable and this is database and here I want to paste that get Firebase sorry get firestore and pass this up here and after that I'm going to export this export this database and save this okay I have to copy this and after that I'm going to input that here and paste it here and yeah I imported okay database and after that I'm going to create a nested function so here this is well here I'm going to use dock to create a listed function it is a Firebase symbol function this also imported here after that I'm going to pass that this database okay and we need to create a main collection name we need to give our main collection name so here main color our main collection name is blog okay and document name is post and after that we are going to create a one more variable this is collection well sorry here I'm going to use collection this also a Firebase symbol to function inside collection I'm going to pass this well and also we need to give a sub collection name okay here I give feedback I need to add this feedback inside the string after that I'm going to add value in this location okay so here I'm going to add a sorry I'm going to use this add doc this is also a inbuilt Firebase concept it is imported here and here I'm going to pass that collection and inside a title I'm going to pass this input value so here e Dot Target Dot title dot value and save this after that if this data is added I'm going to display a lot this added yes save this and yeah I'm going here to add database and click add yeah let us displayed and click ok after that I'm going here and choose the Firebase database yeah here our blog is block collection is created and inside a blog post was created and feedback is also I mean this is a sub collection inside a sub collection value and yeah I'm going to add one more value here this is value and click add click OK here one more it is generated here we have value okay now is successfully added a value in this listed collection I'm going to get this value from this list collection okay so after that here I'm going to create accounts here get value inside a get value this is an async and here go to get value so here const before that we need we are going to get this value in this same location so I'm going to copy that and paste it after this here const this is Theta here I'm going to avoid here get Docs this is also a Firebase symbol to function here I'm going to pass this collection Val yeah after that I'm going to push value in one state so here I'm going to create account one state okay data okay and this is set data after that you state this also usually it is an empty array I'm going to copy this I'm going to change this to get value after that to paste that set data here I'm going to pass this get well I mean get value Dot documents here I'm going to map this value okay inside a map I'm going to create a bracket here this is Doc and you want to create a bracket and I'm going to split this doc dot data and I'm going to pass the ID also okay doc dot ID and I'm going to call this function after this and yeah here to console the data copy this and paste it here and save this go here and right click and inspect go to console here we have value it's duplicating for many time but we have two Alice value and database these values are printed yeah so I don't want to sorry I'm going to cut this I'm going to add this inside a user fact window render only once okay so save this yeah I want to refresh again here we have value it's printed only once okay so here I'm going to map this data after this here data dot map well inside a do to display well dot title save this yeah yeah data is printed and I'm going to add one more value something it's like that I'm going to click add and I'm going to refresh the screen here that value is added yeah yeah this is what I try to do in this video bye

Channel: Coding Comics

Views: 1,867

Keywords: how to create nested collection in firebase using react, create nested collection firestore, get nested collection firestore react, firestore nested collections, firestore nested react js, Firebase Nested Collections in React, React Firebase Firestore Nested Collections, How to Structure Nested Collections in Firebase & React, creating nested collections in firebase with react, nested collection in firebase, how to store and get nested collection value in firebase in react js, react

Id: DV1sUeszRuA

Length: 9min 35sec (575 seconds)

Published: Sat Sep 09 2023