Next.js - The ultimate way to build React apps/

...

/

Handling Forms

Handling Forms

With most web applications, you will have some kind of a form, a way for your user to communicate with the application. In the case of our application, we need to set up a form for our search functionality.

We'll cover the following...

Setting up the keyword search form

First, you need to declare your form with the form tag in your JSX. You want your search upfront and center when a user loads the site. For this reason, you will place your <form> tag and its contents in the index.js file, which renders your homepage, so place an input tag inside the form tag.

Press + to interact
 return (
    <div className='container'>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
        <link rel="stylesheet" href="/styles.css"/>
      </Head>
      <h1>Giphy Search App</h1>
      <form>
        <input type="text"/>
      </form>
      <div class="giphy-search-results-grid">
        {initialData.catGiphys.data.map((each, index) => {
          return(
            <div key="index">
              <h3>{each.title}</h3>
              <img src={each.images.original.url} alt={each.title}/>
            </div>
          )
        })}
      </div>
      
    </div>
  )
}

onChange event

Now you can add an onChange attribute to the input tag. This listens to any changes to that element. Specifically, you want to know when the text being typed in the input is changed.

Press + to interact
      <form>
        <input onChange={} type="text"/>
      </form>

Inside the onChange event, you will place a ...