Trouble with react final form FieldArray, listeners and displaying data from api call outside of form

Question

I want to trigger an API call to fetch some supplemental data and display it alongside my react final form. What's the best way to do this?

I've started by using OnChange from react-final-form-listeners to listen for a field change and make an API call, but I don't really know how to store this data somewhere and display it within the react-final-form framework. Using a functional component and a State hook, it would be relatively trivial, because I would just set the state of a variable and then display it somewhere in the same component. Is this a sign that I should be storing these kinds of things in redux? Can I use hooks instead?

I forked one of the examples and added what I am trying to do:

https://codesandbox.io/embed/react-final-form-field-arrays-k9pqm

Answer 1

You're talking a little too abstractly about your goal here, but sure, you could keep the loaded data in state with a useState() hook. If I were you, I'd want to debounce it, and keep track of whether or not the Promise from your API call was the Promise from the last call or not.