Post Data to Firebase using Axios
How to create Firebase database
- Goto https://firebase.google.com/
- Login with google account
- Click on Go to console button on the top right side
- Click on Add Project button to create a database
- Give any name and click on continue
- Disable google analytics and click on create project
- Once project is created in menu navigate to Build > Realtime Database
- After navigating to Realtime Database, Click on create database button
- Let it to default location United States and click on next
- Select Test Mode and click on enable
- Goto Rules tab to edit read and write rules, Set read and write rules to true then click on publish
- Copy the url from data tab and try with below code to post data to created database. Refer below image for URL Location.
- Add your firebase database URL to below <YourFirebaseDatabaseURL>https://<YourFirebaseDatabaseURL>/register.json
Install Axios Library with below npm command
npm install axios
import React, { useEffect, useState } from "react";
import axios from "axios";
const Display = (props) => {
const [data, seteData] = useState({
fullname: "",
email: "",
password: "",
confirmPassword: "",
});
// Destructring
const { fullname, email, password, confirmPassword } = data;
const changeHandler = (e) => {
seteData({ ...data, [e.target.name]: [e.target.value] });
};
const submitHandler = (e) => {
e.preventDefault();
axios.post("https://<YourFirebaseDatabaseURL>/register.json"
, data).then(()=> alert('Data Submitted Successfully!'));
};
return (
<div style={{ margin: "20px" }}>
<form onSubmit={submitHandler}>
<input
type="text"
name="fullname"
value={fullname}
onChange={changeHandler}
placeholder="Enter Name"
/>
<br />
<input
type="email"
name="email"
value={email}
onChange={changeHandler}
placeholder="Enter Email"
/>
<br />
<input
type="password"
name="password"
value={password}
onChange={changeHandler}
placeholder="Enter Password"
/>
<br />
<input
type="password"
name="confirmPassword"
value={confirmPassword}
onChange={changeHandler}
placeholder="Confirm Password"
/>
<br />
<input type="submit" name="Submit" />
</form>
</div>
);
};
export default Display;
