How to correctly organize array of objects form?

Bug, Feature, or Question?

Question

At the moment there is only one example of FieldArray which handles array of strings. https://github.com/jaredpalmer/formik#fieldarray

Is it possible to implement an array of objects? In case each of friends has firstName, lastName and age for example.

What is a proper way to do it?

[latviancoder]

Here is what I used in my app:

<Form>
    <FieldArray
        name="friends"
        render={arrayHelpers => (
            <div>
                {values.friends.map((friend, index) => (
                    <div key={index}>
                        <Field name={`friends.${index}.name`}/>
                        <Field name={`friends.${index}.age`}/>
                        <button
                            type="button"
                            onClick={() => arrayHelpers.remove(index)}
                        >
                            -
                        </button>
                    </div>
                ))}
                <button
                    type="button"
                    onClick={() => arrayHelpers.push({ name: '', age: '' })}
                >
                    +
                </button>
            </div>
        )}
    />
</Form>

And here is an example validationSchema:

const friendValidationSchema = object().shape({
    name: string().required('name required'),
    age: number().required('age required').typeError('age must be a number')
});

const validationSchema = object().shape({
    friends: array().of(friendValidationSchema)
});

[Nemsae]

@latviancoder @jaredpalmer Is it possible to combine the creation of a new element with an existing<FieldArray />?

In the same example @latviancoder posted, the button to add a new element into the array has this handler onClick={() => arrayHelpers.push({ name: '', age: '' })} from below:

<Form>
    <FieldArray
        name="friends"
        render={arrayHelpers => (
            <div>
                {values.friends.map((friend, index) => (
                    <div key={index}>
                        <Field name={`friends.${index}.name`}/>
                        <Field name={`friends.${index}.age`}/>
                        <button
                            type="button"
                            onClick={() => arrayHelpers.remove(index)}
                        >
                            -
                        </button>
                    </div>
                ))}
                <button
                    type="button"
                    onClick={() => arrayHelpers.push({ name: '', age: '' })}
                >
                    +
                </button>
            </div>
        )}
    />
</Form>

In this example this would just push { name: '', age: '' } element into the array of friends.

However, what if my form is a bit more complex, in that I want to render fields for the new element that I want to push into the array of this.props.values.friends.

The code that I imagine/hope for would be something like this (which I realize doesn’t make much sense):

<Field name={`friends.${indexToBeAdded}.name`}/>
<Field name={`friends.${indexToBeAdded}.age`}/>

Currently what I have to do is create a separate set of fields for the new element…

<Field name={`new_friend_name`}/>
<Field name={`new_friend_age`}/>

Which means I have to have separate validation for those new fields new_friend_name and new_friend_age, and add a special handler that will add the new element into the existing this.props.values.friends using this.props.setValues upon successful validation.

Is there a more elegant way to accomplish this, where I can put the creation of a new element under the umbrella of the <FieldArray />?

Hopefully I’m illustrating the problem clearly enough. Chose not to create another issue as it seems closely tied to this, but certainly don’t mind creating another one if you guys think so.