How to fetch data from database and display in React js

Now our Aim is to grab those movies, so let's start the project: We are going here to create React Project

Setting up project

Let’s create an Application using Command Prompt

CMD > npx create-react-app movies 

Now go to the movies folder…

cd movies

Please note I have deleted files

https://www.themoviedb.org/settings/api

Let's modify our code:

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";ReactDOM.render(<App />, document.getElementById("root"));

App.js

import React from 'react';const App = () => {
  return (
    <div>
      <h1>Hello App Component</h1>
    </div>
  );
};export default App;

Running our Modified Project for the first time:

https://www.themoviedb.org/settings/api

Now we are going to fetch movies into App.js component using fetch() API of javascript. We are going to use async and await to handle the asynchronous data (Promise).

Let’s create an anonymous function to get movies from the API :

Once the Popular movies are fetched it is going to be stored inside a variable called ‘data’. Finally, this data coming from the API needs to be converted into JSON format, so we are going to convert it to JSON and store it into a variable called ‘movies’. Please note that is coming from the server will not on the same time to handle this we have used async and await keyword ensures to wait until the defined task gets executed.

When the page loads you want that API data on your webpage, to get this data we are going to make use hook called useEffect().

Whenever the component gets rendered we are going to use hook useEffect() i.e when the component gets rendered out, run the fetchPopular() function. The empty array [] written at the end of useEffect() ensures that it will load only for the first time i.e it runs when a piece of the state gets updated then this useEffect runs again and it may also help to avoid the infinite loop.

If you are familiar with React class lifecycle methods, you can think of useEffect() Hook is combination of componentDidMount, componentDidUpdate, and componentWillUnmount.

https://www.themoviedb.org/login

→ You can see Movies output in the console of our Browser.

→ Now again to store that data somewhere, here we are stored in a little piece of state, which requires a hook called useState().

https://www.themoviedb.org/login

Here popular is the variable and setPopular is actually a function that can be used to modify the data. The data that is we are getting from the movie database is in the form of an array of objects(see console), so empty array [] is passed in the useState().

Setting the list of movies available of results, because results object has all the data (see console):

https://www.themoviedb.org/login

Loop over to popular movies using map() to get all data of movies.results. This will map and return each movie one by one.

https://www.themoviedb.org/login

First, let’s create a movie component.

https://www.themoviedb.org/login

If Everything is correct we should output like this:

Also if we check the console it has some data.

Now to get the Actual output we are going to use the Props in order to pass data from the Parent to Child component. Now we have to send data from Parent (App.js) to Child (Movie.jsx) so we are going to make use of Props.

For simplicity, I make this tutorial in stapes and assuming that you are a beginner and your know some basic of react and react hooks like useState, and useEffect because I use these two hooks in their

I start this tutorial after creating an empty react app and for API I use jsonplaceholder’s this API > https://jsonplaceholder.typicode.com/albums/

• Create a React state variable to hold data
• Make the API request and store the data
• Render the returned data

For this first import useState

import { useState } from 'react';

Now set the useState to hold the data like this

const [name, setName] = useState([]);

After this, the code should look like this

import { useState } from 'react';function App() {const [name, setName] = useState([]);return (<div className="App">
   <div>render the data here</div>
</div>);}export default App;

The default value of name is set to an empty list and the setName method use to Update the value of name

for this, There are many methods and I show you to fetch and store data use javascript’s builtin function fetch()

How do you fetch data and display it in React?

How to fetch data from database in node js and display in React?

What is the best way to fetch data in React?