💰 Wanna get paid the big bucks writing React? Take this quiz and get offers from top tech companies! 💰

What's the difference between handleSubmit and onSubmit? #

From what I can tell from every example I have seen, there is an unwritten rule in the React community about handling form events:

handleX is what you name the function that you pass to the onX prop.

render() {
  const handleClick = () => console.log('Clicked!');
  return <button onClick={handleClick}>Click me</button>;

render() {
  const handleSubmit = (event) => {
  return <button onClick={handleSubmit}>Click me</button>;

How do I pass form value(s) to my own submit handler? #

redux-form covers handleSubmit functionality by providing a respective handler that you pass as a prop - that is, a handleSubmit method for you to pass to onSubmit.

With that in mind, you can think of the redux-form handleSubmit as a middle layer for your form's submit handler. Simply write your components as you normally would, passing handleSubmit where appropriate:

import React from 'react'
import { reduxForm, Field } from 'redux-form'

const SearchBar = ({ handleChange, handleSubmit, value }) => (
  <form onSubmit={handleSubmit}>
export default reduxForm({ form: 'SearchBar' })(SearchBar)

You can access your form's input values via the values parameter provided to the onSubmit prop:

import React from 'react'
import { connect } from 'react-redux'
import SearchBar from './SearchBar'

let SearchContainer = ({ handleSearchSubmit }) => (
  <SearchBar onSubmit={values => handleSearchSubmit(values.search)} />

const mapDispatchToProps = dispatch => ({
  handleSearchSubmit: value =>
    dispatch({ type: 'SEARCH_CONTAINER_SUBMIT', payload: value })

export default connect(

That's it! No need to specify event.preventDefault(). All that's left to do is handle the dispatched form data in your reducer.