Search⌘ K
AI Features
Home
Courses
Next.js - The ultimate way to build React apps

Handling Forms

Explore how to implement keyword search forms in Next.js by handling input changes, managing form submission with event handlers, preventing default behaviors, and styling forms. This lesson helps you build interactive forms to capture user input effectively within your React applications.

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.

JavaScript (JSX)
 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.

JavaScript (JSX)
      <form>
        <input onChange={} type="text"/>
      </form>

Inside the onChange event, you will place ...