Fetching Data from Mongo DB and Displaying in React JS
When developing web applications, it is common to use a database to store, retrieve, and manipulate data. Mongo DB is a popular choice for many developers due to its flexibility and scalability. In this article, we will look at how to fetch data from a Mongo DB database and display it in a React JS application.
Prerequisites
Before we start, make sure you have the following installed:
- Mongo DB
- Node.js
- React JS
Getting Started
First, we need to create a database and populate it with some data. You can do this using the mongo shell or a GUI tool like MongoDB Compass.
Once the database is set up, we can create a new React JS application using create-react-app:
npx create-react-app mongo-react-app
Next, we need to install a library that will allow us to fetch data from the Mongo DB database. We can use the axios library for this:
npm install axios
Fetching Data
Now that our application is set up, let’s write some code to fetch data from the Mongo DB database. We will create a new component called DataDisplay that will display the fetched data.
import React, { useEffect, useState } from 'react';
import axios from 'axios';
const DataDisplay = () => {
const [data, setData] = useState([]);
useEffect(() => {
const fetchData = async () => {
const result = await axios.get('http://localhost:5000/data');
setData(result.data);
};
fetchData();
}, []);
return (
Data from Mongo DB:
-
{data.map((item) => (
- {item.name}
))}
);
};
export default DataDisplay;
Displaying Data
Now that we have fetched the data, we can display it in our React JS application. We will import the DataDisplay component into our main App component and render it:
import React from 'react';
import DataDisplay from './DataDisplay';
function App() {
return (
Mongo DB Data in React
);
}
export default App;
Conclusion
In this article, we learned how to fetch data from a Mongo DB database and display it in a React JS application. This allows us to create dynamic and interactive web applications that can retrieve and display data from a database. By using axios to fetch data and React JS to display it, we can create a seamless user experience.
After watching all the videos I got trouble in deployment as we are using nodemon to start server in cmd how can handle when it is on internet
sir g par chu kr parnam aap ko
bhout din sai hm yai concept dhundh rahi thi hmko mil nhi raha tha
thanku sir g
Thanks boss..!! really made a useful video
if anyone getting runtime error just add ? like data?.map
thanks man 💓
Thank you so much brother, I was literally trying from 2 days but I was unable to display data on web page My data was totally unable to get in table but wth of you its getting inside table. thanks alot bro..
Can you tell how to fetch data based on the search the user inputs from db.
thanks man
can you explain how to fetch data by using id and display it in browser
thanks a lot you saved my life
That´s a great video! Please let me know when next video will come out!!
Good content ❤