Does [React Final Form] work with Material-UI 3.x?

Question

I want to use a TextField from Material-UI with react-final-form (https://github.com/final-form/react-final-form).

The main question is "How to get values object?"

I cannot get it from TextField.

The result is:

I've already tried different examples but nothing works.

My code:

import React from 'react';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import Card from '@material-ui/core/Card';
import './loginForm.css';
import { Form, Field } from 'react-final-form';

const handleSubmit = (event, values) => {
  console.log('onsubmit event target ', event.target);
  event.preventDefault();
  console.log('onSubmit values: ', values);
};

const onChange = (event) => {
  console.log('on changed: ', event.target.value);
};

const LoginForm = () => (
  <Card className="card">
    <Form
      onSubmit={handleSubmit}
      onChange={onChange}
      render={({ values }) => (
        <form className="login-form" onSubmit={handleSubmit}>
          <Field
            name="pin"
            component={TextField}
            id="standard-name"
            label="PIN"
            value={values}
            onChange={onChange}
          />
          <Button
            type="submit"
            onClick={handleSubmit}
            variant="contained"
            color="primary"
            className="login-btn"
          >
            Sign in
          </Button>
        </form>
      )}
    />{' '}
  </Card>
);

export default LoginForm;

versions:

"@material-ui/core": "^3.9.2",
"react-final-form": "^4.0.2",

Answer 1

You can't directly use @material-ui/core/TextField, you need to wrap it first:

import React from 'react'
import TextField from "@material-ui/core/TextField";

export default ({
  input: { name, onChange, value, ...restInput },
  meta,
  ...rest
}) => (
  <TextField
    {...rest}
    name={name}
    helperText={meta.touched ? meta.error : undefined}
    error={meta.error && meta.touched}
    inputProps={restInput}
    onChange={onChange}
    value={value}
  />
)

Now you have the necessary props passed to @ui/TextField. If you are not doing validation you don't need to pass the meta stuff.

https://github.com/final-form/react-final-form#third-party-components

https://codesandbox.io/s/2z5y03y81r

Answer 2

Yes! The accepted answer is quite good, but it would be really nice to have this done for us for all of the form components. The reason is that each form component has subtle differences that makes passing properties kind of complicated to figure out.

There was one existing project that made a good start to this and gets a ton of downloads each month, but it seems abandoned and stops at MUIv2.

So, I've created my own take on making something modern and tested. It is drop in easy to use and very flexible...

• Source: https://github.com/lookfirst/mui-rff
• Demo: https://lookfirst.github.io/mui-rff/
• Codesandbox: https://codesandbox.io/s/react-final-form-material-ui-example-tqv09

The demo also shows off one of my favorite features of RFF, which is the ability to easily control form renders. This improves performance of large forms, quite a bit.