How to define form values outside form in a custom component in react-final-form

Question

I'm using Field with a custom component in react-final-form. It looks like this:

<Field
  component={DadataAddress}
  name="address"
  onSelect={suggestion => mutators.setValue(suggestion)}
  query={values[name] && values[name].value}
/>

And here's the component itself:

const DadataAddress = ({
  input: { onChange },
  service,
  onSelect,
  ...rest
}) => (
  <DadataSuggestions
    service={service}
    onChange={event => onChange({ value: event })}
    onSelect={onSelect}
  />
);

I would also like to move this line query={values[name] && values[name].value} from the Field to my custom component. But when I do it, I get an error:

Cannot read property 'address' of undefined

I guess, I need to define values, but I don't know how to do it outside form. I would really appreciate your help. Here is a codesandbox with an error.

score -1 · Answer 1 · answered Sep 18 '19 at 14:10

-1

I'm not sure exactly what you're trying to do here, but you don't need a mutator. You can just call onChange when the value is selected. Something like this?

answered Sep 18 '19 at 14:10

Erik R.

7,152
1
29
39

In this case, if I clear the input, the selected value of the address stays in the values. You can type in `Москва` and select any suggestion to see how it works, and then delete it. The address should be filled in the values, only if some suggestion has been selected. If not, it should be empty. This question is similar to my another question https://stackoverflow.com/questions/57873480/clear-a-fields-value-on-input-clear-in-react-final-form. In both cases I uses different libraries for suggestions, but I can't get them to work with react-final-form. – jupiteror Sep 18 '19 at 15:21

How to define form values outside form in a custom component in react-final-form

1 Answers1