ReactJS Firebase Tutorial | Firebase CRUD Example using ReactJS PART-2

Share the post

Hello, In this ReactJS Firebase Tutorial, we will learn How to delete data from a real-time database using Firebase API in ReactJS. In the Firebase CRUD Example using ReactJS PART-1, We had discussed How to create a firebase real-time database & How to insert data in the firebase real-time database.

In this ReactJS Firebase Tutorial, We will see How to delete data from a real-time database in ReactJS. If you saw our last tutorial, We had created a student name & number entry in a real-time database. Now, In this ReactJS Firebase Tutorial, We will delete that data.

So, Let’s start…

Steps required to delete data from a real-time database using Firebase API in ReactJS | ReactJS Firebase Tutorial

  • Step 1: Create a new React Project
  • Step 2: Add Fetch() Method in React Application
  • Step 3: Run React Application
  • Step 4: Output

Step 1: Create a new React Project

We need to create a new ReactJS Project. Use the following command to create a new project in ReactJS.

npx create-react-app myapp

Now, go to our project path.

cd myapp

We will open this project in the Visual Studio Code editor using the following command.

code .

Step 2: Add Fetch() Method In React Application

Now, If you want to see How to set up real time database in the google firebase console then please read Part 1. Now, It’s time to update the ReactJS application code.

We will add the fetch() Method to delete the data from Real-Time Database.

The fetch() Method Can be written as shown below

const deleteData = async (e) => {
    e.preventDefault();
    const result = await fetch(URL,
      {
        method: "DELETE"
      });
    console.log(result);
  };

Full Source Code

import React, { useState } from 'react';

import './App.css';

const App = () => {

  const URL = 'https://reactfcm-46fef-default-rtdb.firebaseio.com/student.json';

  const deleteData = async (e) => {
    e.preventDefault();
    const result = await fetch(URL,
      {
        method: "DELETE"
      });
    console.log(result);
  };
  return (
    <>
      <h1>CRUD Firebase Tutorial</h1>
      {<div>
        <button type="button" onClick={deleteData}>Delete Data</button>
      </div>}

    </>
  );
}

export default App;

Step 3: Run React Application

Now, You can run the ReactJS application using the below command

npm run start

Step 4: Output

Now, We can see our firebase real-time database entry for students is successfully deleted. Please find the below image for your reference

delete data from real-time database using reactjs
delete data from real-time database using reactjs

In this way, We can able to delete the data from the firebase real-time database using ReactJS.

Leave a Comment