ag-gridag-grid-reactreact-final-formfinal-formreact-final-form-arrays

Grid library wrapped with Form is that support custom renderers not working


I have a final-form backed grid built using ag-grid. Ag-grid takes renders which in my case are Fields wrapped with FormSpy's. Using pre-hooks version of final-form works but I had a few problems so I upgraded to the most recent and received the "[X] must be used inside of a component" error.

I used react devtools and sure enough, my custom Fields renderer / editor was being moved outside of context as leafs at the end of the tree. My question is, is there any workaround to make this work? Is there any way to subscribe to a specific context? Bit of an anti-pattern, I know, but I'm running low on ideas.

Example

This is the version with older final-form packages -- https://codesandbox.io/s/final-form-ag-grid-lbq7f


Solution

  • I was having problems using formik because ag-grid-react doesn't support React's context API without a prop, i.e. reactNext={true}. One other suggestion don't put gridApi in state, instead pass a ref to AgGridReact like:

      const gridApi = useRef();
    
      <AgGridReact
        {...}
        ref={gridApi}
      />