Search⌘ K
AI Features
Home
Courses
The Road to React: The One with Hooks

Forms in React

Explore how to implement forms in React by wrapping inputs and buttons within HTML form elements, using onSubmit handlers, and managing state across components. Understand preventDefault's role in preventing page reloads and learn how to separate forms into reusable components to maintain clean React code.

We'll cover the following...

Earlier we have learned a new button to fetch data explicitly with a button click. We’ll advance its use with a proper HTML form, which encapsulates the button and input field for the search term with its label.

Forms aren’t much different in React’s JSX than in HTML. We’ll implement it in two refactoring steps with some HTML/JavaScript. First, wrap the input field and button into an HTML form element:

Node.js
const App = () => {
  ...
  return (
    <div>
      <h1>My Hacker Stories</h1>
      <form onSubmit={handleSearchSubmit}>
        <InputWithLabel
          id="search"
          value={searchTerm}
          isFocused
          onInputChange={handleSearchInput}
        >
          <strong>Search:</strong>
        </InputWithLabel>
        <button type="submit" disabled={!searchTerm}>
          Submit
        </button>
      </form>
      <hr />
      ...
    </div>
  );
};

Instead ...