How properly connect react-final-form and material-ui-chip-input?

Question

I'm using material-ui-chip-input wrapped with Field react-final-form.

I wanted to limit "CHIPS" to 5 only.

Chips are compact elements that represent an input, attribute, or action.

material ui docs

As you can see I'm using 2 states here

1. react useStates
2. react-final-form internal states

This is redundant because react-final-form handled states internally but I can't make to work I'm just showing what I have done so far.

Basically there are two problems with my implementation.

1. It doesn't limit my chips.
2. My react-final-form field values - not updating when clicking DeleteChip

import ChipInput from 'material-ui-chip-input'
import { Field } from 'react-final-form'

const [state, setState] = useState([])

const AddChip = useCallback(
    (chip) => {
        if (state.length + 1 <= 5) {
        setState((prev) => ([...prev.tags, chip]))
        }
    },
    [setState, state.length]
)

const DeleteChip = useCallback(
    (chip) => {
        setState((prev) => (...prev.state.filter((p) => p !== chip)]
        }))
    },
    [setState]
)

  return (
    <Field name="states" validate={isRequired} >
          {({ input: { value, onChange, ...rest }, meta }) => {
     <ChipInput
        defaultValue={Array.isArray(value) ? value : []} // check value first because material-ui-chip-input require an array, by default react-final-form value is empty string
        onChange={(event) => {  // uncontrolled 
            AddChip(event)
            onChange(event)
            // I tried below code but same result not working
            // if (state.length + 1 <= 5) {
            //  onChange(event)
            // }
        }}
        onDelete={DeleteChip} 
       />
      }}
    </Field>
  )

material-ui-chip-input

react-final-form

see codesandbox demo

Answer 1

This is my take: https://codesandbox.io/s/proud-water-xp2y1?file=/src/App.js

Key points:

• Don't duplicate the state, let react final form handle the state for you
• Pass an empty array as the initial state to the FORM, don't pass defaultValues to the Field.
• according to the material-ui-chip-input package you need to use onAdd if used in controlled mode, which we do, since we let react final form handle the state.
• Add the value prop to the Chipinput.
• For cosmetic reasons: don't actually use the render-prop inside <Form /> - use a functional child component instead.

Code:

import ChipInput from "material-ui-chip-input";
import { Form, Field } from "react-final-form";

export default function App() {
  return (
    <Form
      initialValues={{
        states: []
      }}
      onSubmit={() => console.log("submitted")}
    >
      {({ values, onSubmit }) => (
        <form onSubmit={onSubmit}>
          <Field name="states">
            {({ input: { value, onChange } }) => (
              <ChipInput
                value={value}
                alwaysShowPlaceholder={true}
                placeholder="type states here"
                onAdd={(newVal) => {
                  if (value.length >= 5) return;
                  const newArr = [...value, newVal];
                  onChange(newArr);
                }}
                onDelete={(deletedVal) => {
                  const newArr = value.filter((state) => state !== deletedVal);
                  onChange(newArr);
                }}
              />
            )}
          </Field>
          <p>react useStates</p>

          <p>react-final-form values</p>
          <pre
            style={{
              backgroundColor: "rgba(0,0,0,0.1)",
              padding: "20px"
            }}
          >
            {JSON.stringify(values, 0, 2)}
          </pre>
        </form>
      )}
    </Form>
  );
}