16
Going serverless with MongoDB Realm - React.js Version
Serverless architecture is a pattern of running and building applications and services without having to manage infrastructure. It involves the applications and services running on the server, but all the server management is done by a cloud provider.
This post will discuss building a fullstack user management application using MongoDB, MongoDB Realm, and React.js. At the end of this tutorial, we will learn how to create a database on MongoDB, serverless functions as our endpoints using MongoDB Realm and consume the endpoints in a React.js application.
MongoDB Realm is a development platform designed for building mobile, web, desktop, and IoT applications. It offers services like data synchronization, serverless functions, triggers, user authentication, e.t.c. We can build and maintain application on MongoDB Realm using any of the following:
- Realm UI: a browser-based option to create and maintain application
- Realm CLI: a CLI-based option to define and deploy applications
- GitHub Deploy: use configuration files on Github to deploy applications from a Github repository
- Admin API: an HTTP-based request to manage your applications.
In this post, we will be using Realm UI to build our applications.
You can code along by cloning this repository (main branch) here. If you prefer to view the complete code, checkout to the dev branch of this same repository.
In this tutorial, we will focus on implementations only. The project UI has already been set up with TailwindCSS.
You can check out the Vue.js version here.
The following steps in this post require JavaScript and React.js experience. Experience with TypeScript isn’t a requirement, but it’s nice to have.
We also need a MongoDB account to host database the and create serverless functions. Signup is completely free.
To get started, we need to navigate to the project location, open our terminal and install project dependency as shown below:
npm install
With that done, we can start a development server using the command below:
npm start
![](https://res.cloudinary.com/practicaldev/image/fetch/s--4oMajjcm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_B58C50BB61437E91E681B5825981F54733906EC9A6070DFB4A21109C66F0E3FA_1637324516561_screencapture-localhost-3000-2021-11-19-13_20_27.png)
To get started, we need to log in or sign up into our MongoDB account and follow the option that applies to us:
For a New Account (Sign Up)
First, we need to answer a few questions to help MongoDB help set up our account. Then click on Finish.
![](https://res.cloudinary.com/practicaldev/image/fetch/s--k0T17b14--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_B58C50BB61437E91E681B5825981F54733906EC9A6070DFB4A21109C66F0E3FA_1637334362262_Screenshot%2B2021-11-19%2Bat%2B15.58.45.png)
Select Shared as the type of database.
![](https://res.cloudinary.com/practicaldev/image/fetch/s--n-gcwCkX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_B58C50BB61437E91E681B5825981F54733906EC9A6070DFB4A21109C66F0E3FA_1637334670330_Screenshot%2B2021-11-19%2Bat%2B15.59.38.png)
Click on Create to setup a cluster. This might take sometime to setup.
![](https://res.cloudinary.com/practicaldev/image/fetch/s--cwJDLYJx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_B58C50BB61437E91E681B5825981F54733906EC9A6070DFB4A21109C66F0E3FA_1637334961608_Screenshot%2B2021-11-19%2Bat%2B16.13.28.png)
Next, we need to create a user to access the database externally by inputting the Username, Password and then click on Create User. We also need to add our IP address to safely connect to the database by clicking on the Add My Current IP Address button. Then click on Finish and Close to save changes.
![](https://res.cloudinary.com/practicaldev/image/fetch/s--GEZfMf-I--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_B58C50BB61437E91E681B5825981F54733906EC9A6070DFB4A21109C66F0E3FA_1637336863099_Screenshot%2B2021-11-19%2Bat%2B16.29.11.png)
On saving the changes, we should see a Database Deployments screen, as shown below:
![](https://res.cloudinary.com/practicaldev/image/fetch/s--B6brk7G5--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_B58C50BB61437E91E681B5825981F54733906EC9A6070DFB4A21109C66F0E3FA_1637366357918_Screenshot%2B2021-11-20%2Bat%2B00.59.05.png)
For an Existing Account (Log In)
Click the project dropdown menu and click on the New Project button.
![](https://res.cloudinary.com/practicaldev/image/fetch/s--XcTSNMP9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_B58C50BB61437E91E681B5825981F54733906EC9A6070DFB4A21109C66F0E3FA_1637365380025_Screenshot%2B2021-11-20%2Bat%2B00.33.27.png)
Enter the reactRealm
as the project name, click on Next and then click Create Project
![](https://res.cloudinary.com/practicaldev/image/fetch/s--TUJCW4_Q--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_B58C50BB61437E91E681B5825981F54733906EC9A6070DFB4A21109C66F0E3FA_1637365425845_Screenshot%2B2021-11-20%2Bat%2B00.42.02.png)
Click on Build a Database
![](https://res.cloudinary.com/practicaldev/image/fetch/s--NPgml2vk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_B58C50BB61437E91E681B5825981F54733906EC9A6070DFB4A21109C66F0E3FA_1637365760093_Screenshot%2B2021-11-20%2Bat%2B00.47.26.png)
Select Shared as the type of database.
![](https://res.cloudinary.com/practicaldev/image/fetch/s--n-gcwCkX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_B58C50BB61437E91E681B5825981F54733906EC9A6070DFB4A21109C66F0E3FA_1637334670330_Screenshot%2B2021-11-19%2Bat%2B15.59.38.png)
Click on Create to setup a cluster. This might take sometime to setup.
![](https://res.cloudinary.com/practicaldev/image/fetch/s--cwJDLYJx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_B58C50BB61437E91E681B5825981F54733906EC9A6070DFB4A21109C66F0E3FA_1637334961608_Screenshot%2B2021-11-19%2Bat%2B16.13.28.png)
Next, we need to create a user to access the database externally by inputting the Username, Password and then clicking on Create User. We also need to add our IP address to safely connect to the database by clicking on the Add My Current IP Address button. Then click on Finish and Close to save changes.
![](https://res.cloudinary.com/practicaldev/image/fetch/s--GEZfMf-I--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_B58C50BB61437E91E681B5825981F54733906EC9A6070DFB4A21109C66F0E3FA_1637336863099_Screenshot%2B2021-11-19%2Bat%2B16.29.11.png)
On saving the changes, we should see a Database Deployments screen, as shown below:
![](https://res.cloudinary.com/practicaldev/image/fetch/s--B6brk7G5--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_B58C50BB61437E91E681B5825981F54733906EC9A6070DFB4A21109C66F0E3FA_1637366357918_Screenshot%2B2021-11-20%2Bat%2B00.59.05.png)
Next, we need to populate our database with users' sample data. To do this, click on the Browse Collections button
![](https://res.cloudinary.com/practicaldev/image/fetch/s--WSkvg8mp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_B58C50BB61437E91E681B5825981F54733906EC9A6070DFB4A21109C66F0E3FA_1637367731794_Screenshot%2B2021-11-20%2Bat%2B00.59.05.png)
Click on Add My Own Data, input reactRealmDB
and reactRealmCol
as the database and collection name, and click on Create.
![](https://res.cloudinary.com/practicaldev/image/fetch/s--B1tVSxF5--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_B58C50BB61437E91E681B5825981F54733906EC9A6070DFB4A21109C66F0E3FA_1637368231456_Screenshot%2B2021-11-19%2Bat%2B17.07.15.png)
Next, we need to insert these sample data:
To do this, click on the Insert Document button, fill in the details above and click on Insert to save.
![](https://res.cloudinary.com/practicaldev/image/fetch/s--gbAgRMFD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_B58C50BB61437E91E681B5825981F54733906EC9A6070DFB4A21109C66F0E3FA_1637369198121_Screenshot%2B2021-11-20%2Bat%2B01.44.42.png)
![](https://res.cloudinary.com/practicaldev/image/fetch/s--_hlhtqKx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_B58C50BB61437E91E681B5825981F54733906EC9A6070DFB4A21109C66F0E3FA_1637410162134_Screenshot%2B2021-11-20%2Bat%2B01.46.24.png)
With our database populated, we need to create serverless functions to perform Create, Read, Update and Delete (CRUD) on our database. To do this, select the Realm tab, click on Build your own App. Then click on Create Realm Application to setup our application.
![](https://res.cloudinary.com/practicaldev/image/fetch/s--fKqAjsM1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_B58C50BB61437E91E681B5825981F54733906EC9A6070DFB4A21109C66F0E3FA_1637429955105_Screenshot%2B2021-11-20%2Bat%2B18.37.09.png)
MongoDB Realm also ships with templates that we can use to build our application quickly. For this tutorial, we will be building from scratch.
Next, we need to setup permission and rules for our functions. To do this, close the popup guide click on Rules, select the reactRealmCol and click on Configure Collection.
![](https://res.cloudinary.com/practicaldev/image/fetch/s--qqju-qdz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_B58C50BB61437E91E681B5825981F54733906EC9A6070DFB4A21109C66F0E3FA_1637431150221_Screenshot%2B2021-11-20%2Bat%2B18.54.01.png)
MongoDB Realm’s Save and Deploy
With that done, MongoDB Realm will show us a widget illustrating the concept of Save and Deploy.
![](https://res.cloudinary.com/practicaldev/image/fetch/s--hQiuBdK9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_B58C50BB61437E91E681B5825981F54733906EC9A6070DFB4A21109C66F0E3FA_1637431628285_Screenshot%2B2021-11-20%2Bat%2B19.06.58.png)
When writing a serverless function, clicking on Save creates a development draft that we can test and play around with. At the same time, Deploy makes our changes public to be consumed by another application(React.js in our case).
Click on Next and then Got it to continue.
Next, we need to allow Read and Write permissions for our function and then Save.
![](https://res.cloudinary.com/practicaldev/image/fetch/s--YYgkYxnP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_B58C50BB61437E91E681B5825981F54733906EC9A6070DFB4A21109C66F0E3FA_1637432271012_Screenshot%2B2021-11-20%2Bat%2B19.14.44.png)
Next, navigate to the Authentication tab, click on Allow users to log in anonymously, toggle it on and Save Draft.
![](https://res.cloudinary.com/practicaldev/image/fetch/s--Y3i3vS3A--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_B58C50BB61437E91E681B5825981F54733906EC9A6070DFB4A21109C66F0E3FA_1637432705669_Screenshot%2B2021-11-20%2Bat%2B19.20.40.png)
MongoDB Realm also ships with several authentication options that we can explore. For this tutorial, we will be using the anonymous option.
Get All Users Serverless Function
With the configuration done, we can now create a serverless function that returns list of users. To do this, navigate to the Functions tab, click on Create New Function, and input getAllUsers
as the function name
![](https://res.cloudinary.com/practicaldev/image/fetch/s--VFCuUoR3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_B58C50BB61437E91E681B5825981F54733906EC9A6070DFB4A21109C66F0E3FA_1637435627118_Screenshot%2B2021-11-20%2Bat%2B20.07.54.png)
Next, select the Function Editor tab and modify the function to the following:
The snippet above does the following:
- Create a collection variable to access the
reactRealmDB
database andreactRealmCol
collection - Return the list of documents in the collection.
Next, we can test our function by clicking on Run button to see list of users.
![](https://res.cloudinary.com/practicaldev/image/fetch/s--nRrgbgA2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_B58C50BB61437E91E681B5825981F54733906EC9A6070DFB4A21109C66F0E3FA_1637437226082_Screenshot%2B2021-11-20%2Bat%2B20.32.34.png)
Finally, we need to copy any returned user’s _id
and save it somewhere; we need it for the next function. Then click on Save Draft to create a deployment draft for our function.
![](https://res.cloudinary.com/practicaldev/image/fetch/s--T5iP3o3b--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_B58C50BB61437E91E681B5825981F54733906EC9A6070DFB4A21109C66F0E3FA_1637437738284_Screenshot%2B2021-11-20%2Bat%2B20.32.34.png)
Get A User Serverless Function
To do this, click on the Functions tab, click on Create New Function, and input getSingleUser
as the function name
![](https://res.cloudinary.com/practicaldev/image/fetch/s--QREIyDXN--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_B58C50BB61437E91E681B5825981F54733906EC9A6070DFB4A21109C66F0E3FA_1637438304276_Screenshot%2B2021-11-20%2Bat%2B20.54.12.png)
Next, select the Function Editor tab and modify the function to the following:
The snippet above does the following:
- Create a collection variable to access the
reactRealmDB
database andreactRealmCol
collection - Return a single user by finding it by its
_id
. Because MongoDB saves documents in BSON, we need to parse thearg
as BSON using theBSON.ObjectId
.
To test our function, Navigate to the Console tab, replace the Hello world!
in the exports function with the user’s _id
we copied earlier and then click on Run.
![](https://res.cloudinary.com/practicaldev/image/fetch/s--Vmlo7uzN--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_B58C50BB61437E91E681B5825981F54733906EC9A6070DFB4A21109C66F0E3FA_1637439246631_Screenshot%2B2021-11-20%2Bat%2B21.11.55.png)
Finally, we need to save our function by clicking on the Save Draft button.
Edit A User Serverless Function
To do this, we need to follow the same steps as above.
First, click on the Functions tab, click on Create New Function, and input editUser
as the function name.
![](https://res.cloudinary.com/practicaldev/image/fetch/s--GaZkxikL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_B58C50BB61437E91E681B5825981F54733906EC9A6070DFB4A21109C66F0E3FA_1637440543105_Screenshot%2B2021-11-20%2Bat%2B21.34.43.png)
Next, select the Function Editor tab and modify the function to the following:
The snippet above does the following:
- Modify the function to accept
id
,name
,location
, andtitle
arguments - Create a collection variable to access the
reactRealmDB
database andreactRealmCol
collection - Create an
updated
variable that finds the document by_id
, update the collection fields, and set areturnNewDocument
flag to return the updated document.
Next, we can test our function by navigating to the Console tab, replace the Hello world!
in the exports function with required arguments(_id, name, location, and title), click on Run, and then Save Draft.
![](https://res.cloudinary.com/practicaldev/image/fetch/s--hKyXFFE9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_B58C50BB61437E91E681B5825981F54733906EC9A6070DFB4A21109C66F0E3FA_1637454690535_Screenshot%2B2021-11-21%2Bat%2B01.17.58.png)
Create A User Serverless Function
To do this, we need to follow the same steps as before.
First, click on the Functions tab, click on Create New Function, and input createUser
as the function name.
![](https://res.cloudinary.com/practicaldev/image/fetch/s--OT1HzIFG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_B58C50BB61437E91E681B5825981F54733906EC9A6070DFB4A21109C66F0E3FA_1637455228815_Screenshot%2B2021-11-21%2Bat%2B01.40.17.png)
Next, select the Function Editor tab and modify the function to the following:
The snippet above does the following:
- Modify the function to accept
name
,location
, andtitle
arguments. - Create a collection variable to access the
reactRealmDB
database andreactRealmCol
collection. - Create a new user by inserting the arguments and returning the user.
Next, we can test our function by navigating to the Console tab, replace the Hello world!
in the exports function with required arguments(name, location, and title), click on Run, and then Save Draft.
![](https://res.cloudinary.com/practicaldev/image/fetch/s--hQ8l1DID--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_B58C50BB61437E91E681B5825981F54733906EC9A6070DFB4A21109C66F0E3FA_1637456186551_Screenshot%2B2021-11-21%2Bat%2B01.48.28.png)
Delete A User Serverless Function
To do this, we need to follow the same steps as before.
First, click on the Functions tab, click on Create New Function, and input deleteUser
as the function name.
![](https://res.cloudinary.com/practicaldev/image/fetch/s--HEb-eIpB--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_B58C50BB61437E91E681B5825981F54733906EC9A6070DFB4A21109C66F0E3FA_1637456726117_Screenshot%2B2021-11-21%2Bat%2B02.05.10.png)
Next, select the Function Editor tab and modify the function to the following:
The snippet above does the following:
- Modify the function to accept an argument.
- Create a collection variable to access the
reactRealmDB
database andreactRealmCol
collection. - Create a
deleteUser
variable for deleting by_id
.
Next, we can test our function by navigating to the Console tab, replace the Hello world!
in the exports function with the required argument, click on Run, and then Save Draft.
![](https://res.cloudinary.com/practicaldev/image/fetch/s--uxAzNsbw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_B58C50BB61437E91E681B5825981F54733906EC9A6070DFB4A21109C66F0E3FA_1637592681689_Screenshot%2B2021-11-22%2Bat%2B15.47.17.png)
To start using the serverless functions in our application, we need to deploy them. To do this, click on the Review Draft & Deploy button, scroll down and then click on Deploy.
![](https://res.cloudinary.com/practicaldev/image/fetch/s--6nxRZEhU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_B58C50BB61437E91E681B5825981F54733906EC9A6070DFB4A21109C66F0E3FA_1637592054362_Screenshot%2B2021-11-21%2Bat%2B02.16.39.png)
We should get a prompt showing the status of our deployment.
To integrate MongoDB Realm in our application, we need to install the dependencies with:
npm i realm-web
realm-web
is a library for accessing MongoDB Realm from a web-browser.
Setup an Environment Variable
First, we need to create a .env
file in the project root directory, and in this file, add the snippet below:
REACT_APP_REALM_APP_ID=<your-realm-app-id>
To get our Realm App ID, we need to click on the copy icon as shown below:
![](https://res.cloudinary.com/practicaldev/image/fetch/s--W-GGwIdS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_B58C50BB61437E91E681B5825981F54733906EC9A6070DFB4A21109C66F0E3FA_1637483339552_Screenshot%2B2021-11-21%2Bat%2B09.27.34.png)
Setup MongoDB Realm
Next, we need to create a utils
folder in the src
folder, and in this folder, create a mongo.client.ts
file and add the code snippet below:
The snippet above does the following:
- Import the required dependencies.
- Create a variable to store the Realm App ID.
- Create and export an instance of MongoDB Realm and pass the App ID. The bang
!
in front ofREALM_APP_ID
tells the compiler to relax the non-null constraint error(Meaning the parameter cannot be null or undefined) - Create and export the credential type we will be using for this app. We configure this authentication option earlier.
Get All Users
To get all users, we need to create an interface to describe the response properties. To do this, we need to create a models
folder in the src
folder, and in this folder, create a user.interface.ts
file and add the code snippet below:
PS: The question mark in front of _id tells TypeScript that this property is optional since MongoDB automatically generates it.
Next, we need to modify App.tsx
by updating it with the snippet below:
The snippet above does the following:
- Import the
IUser
interface,app
, andcredentials
. - Create state variables to manage the list of users.
- Create a
getUsers
function inside theuseEffect
hook to authenticate our application using thecredentials
imported, get the list of users by accessing thegetAllUsers
serverless function we created earlier, and then update theusers
state. PS: The serverless function (getAllUsers in our case) called must be the same as the one defined on MongoDB Realm. - Update the mark-up to display the list of users.
Complete App.tsx
Create A User
To create a user, we must first modify App.tsx
by creating a state variable to manage returned value when a user is created. We also need to add the state as dependency on the useEffect
hook; so that when changes are made, it refreshes the page and load the latest list of users. Finally, we need to update the Modal
component with the state function to update the value.
PS: TypeScript will complain about the *Modal.tsx*
component not having the setUserValue property. We will fix this.
Next, navigate to the Modal.tsx
file inside the components
folder, update the interface, and create a user.
The snippet above does the following:
- Import the required dependencies.
- Modify the
handleSubmit
function to authenticate our application using thecredentials
imported. Create a user by accessing thecreateUser
serverless function we created earlier, passing the required arguments (name, location, and title)and then updating theuserValue
and form state.
Edit A User
To edit a user, we must first modify App.tsx
by creating a state variable to manage the _id
of the user we want to edit. We also updated the onClick
event to update the state variable and pass it as props to the Modal
component.
Next, we need to populate our form when the Edit button is clicked. To do this, open Modal.tsx
and update as shown below:
The snippet above does the following:
- Import the required dependencies.
- Modify the interface and props to include
editingId
- Use
useEffect
to conditionally check if it’s editing or creating, get the selected user details using thegetSingleUser
serverless function and then update the form values. ThegetSingleUser
function also required us to converteditingId
to string usingBSON.ObjectID
function. - Clean up the effect by updating the form state to an empty string.
Next, we need to update the handleSubmit
function to include updating the user’s details by conditionally checking if it is an update action or not. Next, we need to call the editUser
serverless function and pass in the required parameters. Finally, update the userValue
, restore the form back to default and close the Modal
component.
Complete Modal.tsx
Delete A User
To delete a user, we need to modify App.tsx
by creating a handleDelete
function as shown below:
The snippet above does the following:
- Import the required dependencies.
- Creates a
handleDelete
function that takes anid
as an argument, authenticate our application using thecredentials
. Delete selected user using thedeleteUser
serverless function and update theuserValue
state.
Complete App.tsx
Finally, we can test our application by starting the development server and performing CRUD operations.
![](https://res.cloudinary.com/practicaldev/image/fetch/s--NpyWs1Es--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_B58C50BB61437E91E681B5825981F54733906EC9A6070DFB4A21109C66F0E3FA_1637515600361_Screenshot%2B2021-11-21%2Bat%2B18.26.26.png)
This post discussed how to create a database on MongoDB, create and deploy serverless functions using MongoDB Realm and consume the endpoints in a React.js application.
You may find these resources helpful:
16