React | Should onSubmit Go on the <form> or the <button>?

UpdatedJuly 6, 2025

Front-end developer with a background in Korean language QA and education.
Experienced in localisation testing, cross-functional teamwork, and user-focused development.
I enjoy crafting intuitive web experiences with React, Next.js, and TypeScript — always learning, always building.

1. Using onSubmit on the

Put onSubmit on the <form>.
Use type="submit" on the button.
Call e.preventDefault() in your handler if needed.

<form onSubmit={handleSubmit}>
  <input type="text" />
  <button type="submit">Send</button>
</form>

This approach handles submission for the entire form, including when the user presses the Enter key, which improves keyboard accessibility.

2. Using onClick on the

Works, but not ideal for forms.
Still use type="submit" for accessibility.

<form>
 <input type="text" />
 <button type="submit" onClick={handleSubmit}>Send</button>
</form>

This approach only responds to mouse clicks or taps on the button itself, and may not handle keyboard submission (e.g. pressing Enter) properly, which can negatively affect accessibility.

#notes #reactjs

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

React | useTransition vs Suspense – same vibes, different jobs

At first glance, useTransition and Suspense both seem like they're about handling delays in React. But they actually serve quite different purposes. Here’s how I finally wrapped my head around them. Simple examples ✅ useTransition – defer expensive...

Jul 21, 20251 min read

React | React.memo, useMemo, useCallback – what’s the difference?

I always mix these up, so I finally sat down to write a quick comparison. They’re all about React performance optimisation, but they solve slightly different problems. 1. React.memo – don’t rerender this if props are the same tsx const Child = React....

Jul 21, 20252 min read

React | useReducer: When useState Starts Getting Messy

I usually reach for useState by default, but when the state logic starts feeling a bit tangled—or I’ve got multiple values changing together—I’ve been reaching for useReducer. It’s like a mini state machine right inside your component. ✅ Quick Exampl...

Jul 20, 20252 min read

React | Trying out React Context API + Custom Hooks for Global State

I've been using React’s Context API to simplify how I manage and share state across components—mainly to avoid prop drilling and keep things cleaner. Thought I’d share how I’ve set it up and what’s been working well for me. ✅ Local context setup (jus...

Jul 19, 20252 min read

React | When to Use FormData in React

Quick notes on when to use FormData vs just using React state. ✅ Use FormData when... 1. Uploading files (e.g. images) Files can’t be sent via JSON.stringify()FormData handles multipart/form-data for you const handleSubmit = (e) => { e.preventDefau...

Jul 14, 20252 min read

Valencia Log.dev

9 posts

Hello, I’m Valencia — a self-taught frontend developer based in the UK. This blog is where I share what I’m learning, building, and occasionally messing up. Simple notes, honest progress.

Command Palette

1. Using onSubmit on the

2. Using onClick on the

Comments

More from this blog