Unable to set initialValues on checkboxes through Field in react final form

Question

I'm having issues with initialValues in my project, where I'm using react-final-form.

What I'm looking for is to have multiple initialValues to be set on the list of checkboxes.

I'm aware of the initialValues property on where I can set it from there, like below.

<Form
onSubmit={onSubmit}
initialValues={{ sauces: ["ketchup", "mustard"] }}
render={({
  handleSubmit,
  form,
  values,
  ...formProps
}) => (
  <form onSubmit={handleSubmit}>
    <div>
      <label>Sauces</label>
      <div>
        <label>
          <Field
            name="sauces"
            component="input"
            type="checkbox"
            value="ketchup"
          />{" "}
          Ketchup
        </label>
        <label>
          <Field
            name="sauces"
            component="input"
            type="checkbox"
            value="mustard"
          />{" "}
          Mustard
        </label>
    </form>
/>

But I want to be able to use the initialValue on instead because I don't have access to the where I'm rendering the checkboxes.

<Form
onSubmit={onSubmit}
render={({
  handleSubmit,
  form,
  values,
  ...formProps
}) => (
  <form onSubmit={handleSubmit}>
    <div>
      <label>Sauces</label>
      <div>
        <label>
          <Field
            name="sauces"
            component="input"
            type="checkbox"
            value="ketchup"
            initialValue={["ketchup", "mustard"]}
          />{" "}
          Ketchup
        </label>
        <label>
          <Field
            name="sauces"
            component="input"
            type="checkbox"
            value="mustard"
            initialValue={["ketchup", "mustard"]}
          />{" "}
          Mustard
        </label>
    </form>
/>

I have a code example below where I set initialValues through the and also through

It works fine on example, but on the values get set but I'm unable to edit the checkboxes when I use initialValue on . I tried it both with a single value and multiple values. Is this a bug within react-final-form or can this be accomplished in another way?

https://codesandbox.io/s/react-final-form-issues-with-checkboxes-forked-6fc68u?file=/index.js

Answer 1

I realize this answer is probably too late for your application, but for checkboxes, initialValue is a boolean. So, you'd just set initialValue to be truthy if you wanted it to be checked on that individual checkbox:

<Form
    onSubmit={onSubmit}
    render={({
      handleSubmit,
      form,
      values,
      ...formProps
    }) => (
      <form onSubmit={handleSubmit}>
        <div>
          <label>Sauces</label>
          <div>
            <label>
              <Field
                name="sauces"
                component="input"
                type="checkbox"
                value="ketchup"
                initialValue
              />{" "}
              Ketchup
            </label>
            <label>
              <Field
                name="sauces"
                component="input"
                type="checkbox"
                value="mustard"
                initialValue
              />{" "}
              Mustard
            </label>
        </form> )
    />

Also, if you wanted to set initialValues on the form component, the input would look like:

<Form
onSubmit={onSubmit}
initialValues={{ sauces: { ketchup: true, mustard: true } }}

Hope that helps!