setValue function from @redwoodjs/forms not working

Hi all!

I’ve been using Redwood recently and really enjoying it but I cannot seem to get the setValue function from the @redwoodjs/forms module working for some reason. I’ve looked over the docs on the Redwood and React Hook Form websites but can’t find what’s wrong on there. Here’s an example of my code:

import {
  Form,
  FormError,
  FieldError,
  Label,
  TextAreaField,
  TextField,
  Submit,
  useForm,
} from '@redwoodjs/forms'

const NoteForm = (props) => {
  const { setValue } = useForm()

  const onSubmit = (data) => {
    props.onSave(data, props?.note?.id)
  }

  return (
    <div className="rw-form-wrapper">
      <Form onSubmit={onSubmit} error={props.error}>
        <FormError
          error={props.error}
          wrapperClassName="rw-form-error-wrapper"
          titleClassName="rw-form-error-title"
          listClassName="rw-form-error-list"
        />

        <Label
          name="name"
          className="rw-label"
          errorClassName="rw-label rw-label-error"
        >
          Name
        </Label>

        <TextField
          name="name"
          defaultValue={props.note?.name}
          className="rw-input"
          errorClassName="rw-input rw-input-error"
          validation={{ required: true }}
        />

        <FieldError name="name" className="rw-field-error" />

        <Label
          name="description"
          className="rw-label"
          errorClassName="rw-label rw-label-error"
        >
          Description
        </Label>

        <TextField
          name="description"
          defaultValue={props.note?.description}
          className="rw-input"
          errorClassName="rw-input rw-input-error"
        />

        <FieldError name="description" className="rw-field-error" />

        <Label
          name="source"
          className="rw-label"
          errorClassName="rw-label rw-label-error"
        >
          Source
        </Label>

        <TextAreaField
          name="source"
          defaultValue={props.note?.source}
          className="rw-input"
          errorClassName="rw-input rw-input-error"
          validation={{ required: true }}
        />

        <FieldError name="source" className="rw-field-error" />

        <button
          type="button"
          onClick={() => {
            console.log('CLICK!')
            setValue('source', 'value set by click')
          }}
        >
          Set Value
        </button>

        <div className="rw-button-group">
          <Submit disabled={props.loading} className="rw-button rw-button-blue">
            Save
          </Submit>
        </div>
      </Form>
    </div>
  )
}

export default NoteForm

Currently I’m just using setValue on a button as a contrived example but in the long term I’m looking to hook CodeMirror up to it.

Thanks for any help :slight_smile:

Hey @jbenner if you use useForm like this you need to pass formMethods as a prop to your Form component.


const formMethods = useForm()

const { setValue } = formMethods

<Form formMethods={formMethods} onSubmit={onSubmit} error={props.error} / >

Internally when you don’t need access to formMethods redwood does this setup for you so you don’t have to worry about it. But when you do need to access these formMethods in your component you need to pass in the rest of the methods to the form so redwood know how to handle it.

Hers a link to the documentation on formMethods - Forms | RedwoodJS Docs

Awesome, that did it! Thanks for the help @KrisCoulson :slightly_smiling_face: