This React article discuss how to implement React CRUD operations with Firebase. To demonstrate this topic, we’ll build an app for managing contact information like – full name, mobile, email and address.
Create React App
First of all, let’s create a react app and then open in vs code. For that, execute following commands one by one.
npx create-react-app react_firebase_crud cd react_firebase_crud code .
I’ve added bootstrap and font awesome style-sheet CDN reference into index.html (public/index.html).
Create and Add Firebase into React App
First of all, go to Firebase Console, create firebase project. after that, you can create a database (using Database option from sidebar). then look for Real Database and click on create database. select the test mode to avoid permission for read and write operation.
After all, we’ve to copy configuration data into react application. For that click on web icon in project overview (dashboard).
In opened dialog, you could see the firebase configuration as shown below. Copy the object marked, for our react application.
Configure React App for Firebase
first of all install npm package for firebase.
npm i -s firebase
Create a new file – src/firebase.js . we’ve to use the copied firebase configuration as shown below.
Structure of the App
● src +---● components | | | |--ContactForm.js (form operations) - child | |--Contacts.js (list of records) - parent | |-- App.js |-- index.js (bootstrap and fa icon) |-- firebase.js
Inside this app, there are two important react-hook components –
Retrieve and Display Records from Firebase.
In Contacts component, all of the firebase db can be retrieved.
In order to show this component, we’ve to change the return statement in default App component – src/App.js.
Inside the Contacts component, I’ve imported the firebase.js to work with firebase db. There are two state variable –
currentId is used to store id of record opened for edit operation and list of records from firebase will be stored in
We can retrieve contact records under firebase db node
contacts . For that we’ve called
on function from the firebase node –
contacts, for subscribing to any changes inside the node. So whenever there is an insert, update or delete operation occurs, the call back will be executed automatically. Retrieved documents are saved in
contactObjects. As you can see we’ve made this subscription inside React Hook function
useEffect with empty array as a second parameter.
Few words on useEffect.
As you know, there are two parameters for
useEffect function- a call-back function and a component state variable, if there is a change in value of the state property, the call-back function will be invoked. hence we call it as
side-effect of state property.
In this project, we have called the
useEffect function with empty array as the second parameter. so it’s call-back function will be invoked when the component is fully loaded. similar React class based component life cycle event –
Now you could see dummy functions
onDelete for CRUD operations. we’ll discuss that later.
As per the component design, we’ve two bootstrap column. Inside the first column, ContactForm component will be displayed. on the other side we have rendered table by looping through
contactObjects. Instead of collection of objects you could also convert that into array of objects. In-order to avoid the extra work I’ve used the same object collection from firebase response.
The table will look like this ( currently there is no data in firebase data).
React Form Design
Inside ContactForm component, a form for edit and delete operation is designed. so update components/ContactForm.js file as follows.
From parent component, we’ve passed
addOrEdit. With component state property –
handleInputChange function, we’ve designed the form. Inside form submit event, the parent function
addOrEdit is called for insert and update operation. so let’s complete this function in parent component –
Both insert and update operation is done inside this function, based on the
currentId value, we can decide whether we’ve got an insert or update operation.
For inserting a record into firebase collection
push function can be called and for an update operation, we can call
set function with updated details. After each operation, the
currentId property is set to
''. At the same time inside ContactForm component, you could see the
useEffect function, it will be executed whenever there is a change in
contactObjects. if there is a value in
currentId state property, corresponding record is set to
values state property and that’s how we open a record for update operation. you can check edit button in parent component updating
currentId inside its click event. when
values property is reset to it’s initial field values for form reset operation.
Inside the Contacts component, we have shown the delete button. Now let’s define the button click event –
addOrEdit as shown below.
In our YouTube channel, we have discussed the same topic in following video.