Built with

Ex. 4 - Custom Hooks

Instructions

We will now create a specific Hook who will be responsible for doing a search on the API.

Create a custom useMovieSearch Hook in src/containers/MovieDb.js

The Hook custom will have to allow to recover a list of films from the API.

Expected result

The application works as before.

Help

App.js

xxxxxxxxxx
 
// App.js
import React, { useState } from 'react'
import { Normalize, Grid, Typography } from '@smooth-ui/core-sc'
import SearchInput from './components/SearchInput'
import { useMovieSearch } from './containers/MovieDb'
​
export default function App() {
  const [query, setQuery] = useState('Lord of the Rings')
​
  // The usage of the custom Hook to collect the list of movies from the API
  const movies = useMovieSearch(query)
​
  return (
    <>
      <Grid py={200}>
        <Normalize />
        <Typography variant="display-1">Smooth Movie</Typography>
        <SearchInput
          value={query}
          onChange={event => setQuery(event.target.value)}
        />
        {movies && movies.map(movie => <p key={movie.id}>{movie.title}</p>)}
      </Grid>
    </>
  )
}