useField must be used inside of a <Form> component

Are you submitting a bug report or a feature request?

Bug

What is the expected behavior?

I am replacing redux-form with react-final-form in the process of upgrading in our apps react-admin v2 to v3.

<Field /> should be wrapped into <Form /> without error.

What is the current behavior?

It throw:

 useField must be used inside of a <Form> component

What’s your environment?

React Final Form version 6.3.5 Final Form version 4.18.7 OS/browser affected chrome Node version, 13.5

Other information

<SimpleForm
            redirect={redirect}
            toolbar={(
              <Toolbar redirect={redirect}>
                <SaveButton redirect={redirect} />
              </Toolbar>
            )}
            handleSubmit={this.handleSubmit}
            onSubmit={() => alert('submit')}
            record={record}
            submitOnEnter={false}
            {...rest}
          >
            <Wrapper>
              {list.map((siteService, i) => (
                <FormGroup key={siteService.name} check className={cn({ 'mt-5': !!i })}>
                  <Strong>
                    <Label check className="p-0">
                      <Field name="firstName" component="input" placeholder="First Name" />
                      <H2 className="d-inline-block">{siteService.name}</H2>
                    </Label>
                  </Strong>
                </FormGroup>
              ))}
            </Wrapper>
          </SimpleForm>

With <SimpleForm /> being https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/form/SimpleForm.js

[abdelmomen1985]

@kopax could you please tell how did you solve it using mutators , i am facing the same issu

[abrad45]

@imryanjay useField must eventually bubble up to a <Form> component. That’s the solution to this issue. If you have code to share I can be more specific.