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

Handling Forms

Explore how to set up and handle forms in a Next.js app for an interactive Giphy search experience. Learn to manage input values with onChange events, prevent default form submission behavior, and style your form for better usability while integrating these techniques into your React component.

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 a console.log to ...