Getting errors in form api hooks

[victorbf]

I'm getting this error every time i try to use a function in formApi hooks
Uncaught TypeError: formApi.setValue is not a function

Here is what i'm getting by consoling logging it:

Here is my code:

I'm using version 2.3.0 but i already tried to upgrade it.

[CRGavrila]

You can try this insteand of useFormApi:

<Form> { ({ formState, formApi }) => ( <> <Field field="fieldName"/> <button onClick={ev => { formApi .setValue('fieldName', 'test'); // or // formApi .setValues({ 'fieldName': 'test' }); }} > click button </button> </> ) }

[victorbf]

Thanks that work it! But i solved as well, hooks works only in the children component not in the one who is calling the FORM component. Sorry about that.

[joepuzzo]

^^^^ @victorbf yes you cant use hooks outside of the <Form />

[brendanfalkowski]

Got stuck on this too. Maybe the docs for useFormApi and useFieldApi aren't the best examples because it expects forms are broken into multiple sections which are components instead of one big chunk of JSX.

Almost all our forms (so far) are fully contained in one-file/one-component for simplicity (ex: contactForm.js). I wouldn't have figured it out without the comment from @CRGavrila.

Re-posting that code with formatting for future reference.

<Form>
    {({ formApi }) => (
        <Fragment>
            <Field field="fieldName"/>

            <button onClick={() => formApi.setValue('fieldName', 'go bananas')} >
                click button
            </button>
        </Fragment>
    )}
</Form>

[joepuzzo]

This ^^^ is in the docs on the first page