Built with

Ex. 3 - Data Fetching

Instructions

We will now retrieve the data from the TheMovieDB API. An API key has already been created, so we can focus on the application part.

To retrieve the data, we will use the library axios, this allows to make HTTP requests in a simple way and to ensure compatibility on all browsers.

Install axios
Using useEffect,useState and axios recover data from the API

Expected result

When the user types in the search field, the corresponding movie list is displayed.

Help

How should I use the Movie API with Axios?

xxxxxxxxxx
 
axios
  .get('https://api.themoviedb.org/3/search/movie', {
    params: {
      api_key: 'c5742978852b8f695a61e22a33a8196c',
      query: 'Lord of the Rings',
    },
  })
  .then(res => {
    console.log(res.data)
  })

App.js

xxxxxxxxxx
 
// App.js
import React, { useState, useEffect } from 'react'
import { Normalize, Grid, Typography } from '@smooth-ui/core-sc'
import axios from 'axios'
import SearchInput from './components/SearchInput'
​
export default function App() {
  const [query, setQuery] = useState('Lord of the Rings')
  /* TODO: create a state for the movies */
​
  useEffect(
    () => {
      /* TODO: perform the request */
    },
    [
      /* TODO: define the necessary dependencies */
    ],
  )
​
  return (
    <>
      <Grid py={200}>
        <Normalize />
        <Typography variant="display-1">Smooth Movie</Typography>
        <SearchInput
          value={query}
          onChange={event => setQuery(event.target.value)}
        />
        {/* TODO: display the list of movies */}
      </Grid>
    </>
  )
}