Search code examples
react-final-formfinal-form

Array of strings - without nesting

I want my record level data of the form to looks like this:

{
   names: ['foo name', 'bar name']
}

However I am having to nest which gives me:

{
   names: [ { name: 'foo name' }, { name: 'bar name' }]
}

The nest is caused by this:

        <FieldArray name="names">
          {({ fields }) =>
            fields.map((name, index) => (
              <div key={name}>
                <Field
                  name={`${name}.name`}
                  component="input"
                  placeholder="Name"
                />
              </div>
            ))
          }
        </FieldArray>

Is there a way to avoid this nesting, and get a FieldArray of just strings?

Solution

  • Solved it, I just had to use

    name={name}

    instead of

    name={`${name}.name`}

    Cool!