LogoENEnglish

Forms in React – Submitting Data with onSubmit and Action in Search Forms

react-forms-Forms are essential in modern applications. This article walks through building a search form in React using input and button elements. First, we use the onSubmit attribute to manage form submission, then introduce the action attribute to align with native HTML behavior. This structure improves accessibility, readability, and prepares the app for future React updates.submit-search-with-onsubmit-and-action

React formsonSubmitactionpreventDefault

~2 دقیقه مطالعه · آخرین به‌روزرسانی ۲ آبان ۱۴۰۴

Introduction


Forms in React behave similarly to HTML, but with enhanced control over state and events. In this article, we build a search form using an input field and a button, then refactor it into a reusable component. Later, we introduce the action attribute to align with native form behavior.


Building a Form with onSubmit


We start by wrapping the input and button inside a form and using onSubmit to handle submission:


<form onSubmit={handleSearchSubmit}>
  <InputWithLabel ... />
  <button type="submit">Submit</button>
</form>

In the handleSearchSubmit function, we use event.preventDefault() to prevent the page from reloading:


const handleSearchSubmit = (event) => {
  setUrl(`${API_ENDPOINT}${searchTerm}`);
  event.preventDefault();
};

Extracting the Form into a Component


We refactor the form into a SearchForm component for better readability and reuse:


const SearchForm = ({ searchTerm, onSearchInput, onSearchSubmit }) => (
  <form onSubmit={onSearchSubmit}>
    <InputWithLabel ... />
    <button type="submit">Submit</button>
  </form>
);

Using Action Instead of onSubmit


In newer versions of React, we can use the action attribute to handle form submission. This attribute receives a function that processes the form data:


const SearchForm = ({ searchTerm, onSearchInput, searchAction }) => (
  <form action={searchAction}>
    <InputWithLabel ... />
    <button type="submit">Submit</button>
  </form>
);

In this case, we no longer need preventDefault():


const searchAction = () => {
  setUrl(`${API_ENDPOINT}${searchTerm}`);
};

Benefits of Using Forms in React


  • Improved structure and readability
  • Keyboard accessibility via Enter key
  • Reusable components for cleaner code
  • Future-proofing with native form behavior via action

Conclusion


Forms in React are a powerful way to collect and submit data. By using onSubmit and later action, we create forms that are both readable and aligned with native HTML behavior. This structure enhances user experience and makes the application easier to maintain and extend.


نوشته و پژوهش‌شده توسط دکتر شاهین صیامی

مقالات مرتبط

Third-Party Libraries in React – Using Axios and Async/Await for Data Fetching

This article explores how to replace the native fetch API with the more stable and feature-rich Axios library for data fetching in React. It also demonstrates how to refactor promise-based code using async/await and try/catch blocks for improved readability and error handling. These techniques enhance compatibility with older browsers, improve testability, and simplify asynchronous logic.

ادامه

Explicit Data Fetching in React – Controlling API Requests with a Confirmation Button

In the initial implementation, every keystroke in the search field triggered a new API request. This article demonstrates how to shift to explicit data fetching in React, where data is only fetched when the user clicks a confirmation button. By separating the searchTerm and url states, and using useCallback and useEffect, we gain full control over when API requests are sent.

ادامه

Impossible States in React – Predictable State Management with useReducer

Using multiple useState hooks to manage related states like data, loading, and error can lead to impossible states — combinations that should never occur in a well-designed UI. This article shows how to consolidate related states into a single useReducer hook, enabling predictable transitions and eliminating bugs like simultaneous loading and error indicators. By structuring state as a complex object and dispatching clearly defined actions, we gain control and clarity in asynchronous data flows.

ادامه

Advanced State Management in React – Using useReducer for Complex Transitions

While useState is ideal for simple state updates, React’s useReducer hook offers a more scalable solution for managing complex state transitions. This article demonstrates how to migrate story-related state from useState to useReducer, handle multiple actions like setting and removing stories, and refactor reducer logic for clarity. It’s a foundational step toward building robust, declarative state logic in React applications.

ادامه

Conditional Rendering in React – Displaying Loading and Error States for Asynchronous Data

Conditional rendering in React is a powerful tool for controlling what appears in the UI based on different states. This article explains how to show a “Loading…” message while asynchronous data is being fetched, and how to display an error message if the request fails. Using useState and useEffect, we manage isLoading and isError flags, and render content dynamically using ternary and logical operators.

ادامه

Asynchronous Data in React – Simulating API Fetching with useEffect and Promises

In React, data is often fetched asynchronously from external sources. This article demonstrates how to simulate asynchronous data fetching using Promises and useEffect. We start with mock data, introduce a delay to mimic network latency, and manage state updates with useState. This is the first step toward integrating real APIs into React applications.

ادامه
مقاله‌ی قبلی