DEV Community

Alex Blinov
Alex Blinov

Posted on • Originally published at


Custom onChange in React Final Form

Let's take a case when we need to call our own function to change a state of a specific field in a form (our react final form).

Here is a way to do the exact that:
You should pass your function as a parameter and after that just call it inside of the onChange method


const FormGroupAdapter = ({ input, inputOnChange }) => {
    const inputProps = {
        onChange: e => {
            inputOnChange && inputOnChange(e);

    return <input {...inputProps} />;

const handleChange = event => {

const App = () => (
        render={({ handleSubmit, reset, submitting, pristine, values }) => (
            <form onSubmit={handleSubmit}>
                    <label>some label</label>

Live example

Latest comments (0)

Top Posts from the React Ecosystem

1. Changes In The Official React Documentation

The former React Docs Beta has been officially released as the updated React documentation at after years of hard work and refinement. Check out the brand new React Docs: What’s New in the Updated React Docs

2. CRA's Time is Over

React developer team has removed create-react-app (CRA) from official documentation rendering it no longer the default setup method for new projects. The bulky setup, slow, and outdated nature of CRA led to its removal: create-react-app is officially dead

3. How to Fetch Articles for Your Portfolio

Integrate the articles of your profile into your personal portfolio with either React, Vue, or Next.js by following these simple steps. It outlines how to include frontend to pull the information and correctly utilizes the API: How to Fetch Your Articles for Your Portfolio with React