How to add user data into Firebase in ReactJS

 This article will show you how to add user data  into firebase in ReactJS. Take a look on it and if you will have any doubt regarding this topic then just comment below the article or you can email me your problem with code.

Watch video on this Topic in our YouTube Channel 

So Let's start 

NOTE: Follow below steps👇

Step1:

Go to Firebase and create account if you don't have account and if you already have account then just sign in and follow the steps.

Step2:

Click on Create a new project and give it name (its nice to give the name of your app name as same as project name)

Step3:

Google Analytics : Its just a test so we don't need to enable it for our project yet 

but if you are looking to make your site/app live for public then you can enable it for analytics of your project. Here i will disable it and then click on Continue

Step 4:

After this you will see something like this which means the firebase is creating your project. 

Now click on continue

Step 5:

Now your screen will be like this 👉 

Click on Realtime Database 

Step 6:

Now we have to create database to save our data 👇 and Click on Create Database

Step 7: Choose database server 

Keep it default for testing 

And Choose  Start in Test Mode 

Step 8:

Database is created and is ready to use as you can see there is link start with https://  which we will used in our source code to connect our project with firebase

Now We need to implement it into our project

So now create simple form 

First I will show you how it works then i will explain it 

Now after filling inputs click on submit button

Firebase was empty but after click on submit button it will automatically generate token and save the data in into that token and if another user enter their data then new token will generate and their data will save on that token 👇

Now let's talk about the coding part

I suppose you already know how to create form and know about usestate(use to save data from user input in variable via state function and to use that data in further  )

here i create simple function named PostData and call it on button click

e.preventDefault() used to prevent page refresh

const{fName,lName,email}=details;

make state variable structured so that i don't need to call details every time to use those variables

const res=await fetch("https://fir-b1ede-default-rtdb.firebaseio.com/simpleform.json",

This is very important part because we are fetching the firebase and this address is taken from the firebase

which i already explain you above at Step 8

and now after that URL there is named simpleform.json which is the name of our project database and it can be anything depends upon you such that you can give any name you want and then there is json

which indicates that the file is in json format that data will be saved in firebase as json format.

method:'POST'

method of data

headers:{

               'Content-Type':'application/json'

           }

Type of project(application) and its form i.e. json

body:JSON.stringify({

            fName,

            lName,

            email,

           })

Now the data we are going to send will be saved in key-value pair so here the structured state variable

will used which i already explain above

and here state variable which have the user input value and the key have same name so

we don't need to write it like fName=fName, lName=lName and these data will be in string form

so we stringify the data.

Now its Done

Thank You