5.1 - Form Component

In the last section, we set up our movie app, but now we need to create our next component Form. This component will be where we accept user input, query the API based on that user input, and then send the results to another component to display.

Let's just get started by setting up our component and make sure that it's displaying in our app. First, go into Form.js. Then type the following code into it:

import React, { Component } from 'react';

export class Form extends Component {
    render() {
        return (
            <h1> This is a form </h1>
        );
    }
}

Now you should see "This is a form" in your app.

state

Next thing we need to do is think about our state structure. What kind of state do we need, what information do we need to keep track of? All we're wanting to do here is have the user type into an input field and get results based on that input. It makes sense to have the results in the state, but really that's about it. Let's go ahead and set up our constructor in our Form. Notice how we're setting up the state to hold the results here. Go ahead and type the following in your Form component.

 constructor(props) {
        super(props);
        this.state = {
            results: []
        }
    }

render()

So now that we've got our state set up, we can think about what we're going to need to GET those results. We need an input for the user to type in and then some actions to occur when that happens to go get information from an API. Let's think about what we need to render to the screen. You can take your h1 out of the render and instead put in a form to capture their input. All that really needs to be in this form, is an input. This input should do something when they type, we can use onKeyUp for this.

Additionally, if they try and submit the form somehow, we need to make sure we're preventing the default action of the form, just like always. Go ahead and type the following code in your render.

    render() {
        return (
            <form onSubmit={this.handleSubmit} id="form">
                <input onKeyUp={this.handleKeyUp} id="searchInput" className="searchBar" type="text" placeholder="Search a movie" required />
            </form>
        );
    }

Notice that we've called our two methods handleSubmit and handleKeyUp. It's convention to use handleSubmit for form submission and handle in general when dealing with user input. Now that we have these methods, we need to define them!

handleKeyUp

Now that our render can use these methods, we need to actually make them do things. Let's first start with handleKeyUp. When someone types or "keys up", we want it to hit our api. We want to be able to give them suggestions based on what they're typing in. So, for example, if they can't quite remember the movie name, but know it starts with "hidden", then they'll see a list of responses based on "hidden". Let's go ahead and create our method, and comment out some of the things that we want to actually happen in this method.

handleKeyUp = (e) => {
 // capture user's input from event

 // use user's input to hit an api to get movies

 // store the results of our api query in our state

 // we also need to handle errors
}

Make sure you understand what we're trying to do here. Every time a user types anything in, we're going to hit the api and see what movies match what they've typed. Then, we're going to store the results in our state. We also need to handle errors so they don't break our application.

Pointing to the API

The first step is to hit our API, and pass in useful info such as the value the user typed in. For this project we are using The Movie DB API, so before we can even set up how to get there, we need to go check out the docs. As with most open APIs, there are rate limits on this API, so you always want to have a unique key for your application, that no one else can use, so you can use all of your own API requests within your limit.

Steps to Getting an API Key

1. Sign up for an account here.
2. Email verify and sign in to your account.

3. Click on your settings on your account.

4. Click the API button on the menu

5. Click Create

6. Click "Developer"

7. Accept the terms of use at the bottom.

8. Call your application anything you want. You can use it to indicate that you're learning. Similarly, for application URL you can put localhost for now. Fill out the rest of the information. You can use pseudo-information, if you'd like.

9. Now you should see your key. You can grab the v3 auth version.

Now that we have our API key, we're ready to move on to hitting the API.

The first thing we need to do is set our API key up in a const variable. We use const because this won't change.

 // use user's input to hit an api to get movies
 // store the results of our api query in our state
 // we also need to handle errors

const key = 'yourKeyHere';

Next, we need to actually use this to hit the API. To figure out how to do this, it's a good idea to look at the documentation to see how to format your requests. All APIs should have documentation letting you know how to do this, as no one just magically understands the format of someone else's API. Since we're wanting to search movies, we can look at that section of the api. API Docs Here. Check out the API Docs to understand how this works.

We're going to use fetch to hit our API. Here are the docs for using fetch. While you don't need to go delve into the fetch documentation right at the moment, at some point, it's not a bad idea to go read. You can learn a lot about fetch within the context of what we're about to do. Let's set up our request with fetch first.

// capture user's input
 // use user's input to hit an api to get movies
 // store the results of our api query in our state
 // we also need to handle errors

const key = 'yourKeyHere';
fetch(`https://api.themoviedb.org/3/search/movie?api_key=${key}&language=en-US&query=${e.target.value}&page=1&include_adult=false`)

then()

Next, just like ajax calls, we can do things with the results of our query, and we need to, to take the results and put them in the state. So, in our then we can grab the results and set our state with them.

// capture user's input
 // use user's input to hit an api to get movies
 // store the results of our api query in our state
 // we also need to handle errors

const key = 'yourKeyHere';
fetch(`https://api.themoviedb.org/3/search/movie?api_key=${key}&language=en-US&query=${e.target.value}&page=1&include_adult=false`)
    .then(response => {
        response.json().then(data => {
            const results = data.results;
            this.setState({ results });
        });
    })

Error Handling

So, now that it works on successful responses, we also need to handle errors. We shouldn't try and set state if the API doesn't respond correctly. Our whole handleKeyUp() should look like this. We're console logging our errors so that we can see and fix them.

        const key = 'yourKeyHere';

        fetch(`https://api.themoviedb.org/3/search/movie?api_key=${key}&language=en-US&query=${e.target.value}&page=1&include_adult=false`)
            .then(response => {
                if (response.status !== 200) {
                    console.log('Error: ' + response.status);
                    return;
                }

                response.json().then(data => {
                    const results = data.results;
                    this.setState({ results });
                });
            })

            .catch(err => {
                console.log('Fetch Error :-S', err);
            })
    }

preventDefault()

Now that we've set up our handle key up to handle all the API requests, we just need to prevent the default action of the form submit from happening. We don't need anything in particular to happen there, so we want to preventDefault, just like we have previously. Type this method out just below your constructor and above handleKeyUp().

 handleSubmit = (e) => {
        e.preventDefault();
    }

Form.js

Your complete Form component should look like the following block of code.

import React, { Component } from 'react';

export class Form extends Component {
    constructor(props) {
        super(props);
        this.state = {
            results: []
        }
 }

    handleSubmit = (e) => {
        e.preventDefault();
    }

    handleKeyUp = (e) => {
        const key = 'thisIsAKeyButNotARealOne';

        fetch(`https://api.themoviedb.org/3/search/movie?api_key=${key}&language=en-US&query=${e.target.value}&page=1&include_adult=false`)
            .then(response => {
                if (response.status !== 200) {
                    console.log('Error: ' + response.status);
                    return;
                }

                response.json().then(data => {
                    const results = data.results;
                    this.setState({ results });
                });
            })

            .catch(err => {
                console.log('Fetch Error :-S', err);
            })
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit} id="form">
                <input onKeyUp={this.handleKeyUp} id="searchInput" className="searchBar" type="text" placeholder="Search a movie" required />
            </form>
        );
    }
}

In our next part, we'll create our FormResults component.

Movie Form Results Component