Issues with ag-grid and final-form

Question

I'm struggling to create an editable grid with ag-grid. I've found that using both a renderer and editor where both have useField creates problems when removing rows with react-final-form-array.

Keep in mind that a renderer is the readonly/normal state of the cell while the editor is the edit view; Editor is only rendered while editing.

https://codesandbox.io/s/infallible-violet-joej4?file=/src/App.js

In the example above, you'll see that I've commented out the renderer and validation rules. Commenting out the renderer prevents me from displaying validation errors--on top of this, ag-grid destroys the useField, so my validations are also lost.

Naively, I thought form validation instead of field validation was the way to go, but again, I still require a custom renderer to display validations or metadata.

I then thought of creating a two dimensional array that has all of the useField cells but this causes "Rendered more hooks than during the previous render." errors. I'm not well versed in hooks but I don't see <Field> working either.

Thoughts?

Answer 1

Moved away from updating by cell, and instead updated by grid. This let ag-grid be the source of truth that updates final-form as needed.