-
-
Notifications
You must be signed in to change notification settings - Fork 2.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to handle array of fields #11
Comments
Yes, you can create a const withFormik = Formik(
...
mapPropsToValues: ({id, email, pets}) => ({
id,
email,
...(pets.reduce((accum, current, index) => Object.assign(accum, {
[`pet_type_{index}`]: current.type,
[`pet_name_{index}`]: current.name,
}), {})
})
...
) This results in
There are many ways to then display the pets. Using // example of a form with a nested array that doesn't change size
const myForm = ({ values, handleSubmit, handleChange }) => (
<form onSubmit={handleSubmit}>
<input type="email" onChange={handleChange} id="email" />
{Object.key(values).filter(v => v.startsWith('pet')).map((pet, i) => {
<span>
<input type="text" id={`pet_type_${i}`} value={values[`pet_type_${i}`]} onChange={handleChange} />
<input type="text" id={`pet_name_${i}`} value={values[`pet_name_${i}`]} onChange={handleChange} />
</span>
})}
<button type="submit">Submit</button>
</form>
) Hope that helps. |
Note you would use the same |
@bitstrider @jaredpalmer While you can take the above approach if you want, it's worth noting you're not required to flatten the values out. Formik will work fine with complex nested data structures within What I would probably do, if your API is taking an arbitrary number of Then from your Formik form render you would just do something like:
|
@bitstrider agree with @eonwhite 100%. |
@jaredpalmer @eonwhite thanks these solutions work, and perhaps should get included in the README since array of fields is a common use case for forms IMO (esp say on admin panels). I think |
Formik will pass all props that are not function into values automatically. If you don’t specify mapValuesToPayload, all values become payload by default. These methods are meant to help organize your code. They make refactoring much easier |
how would I use the I can't seem to find a way to update a particular object in an array. |
Am I right in assuming that if I wanted to dynamically add inputs that should be validated, then the implementation that you described would not work, since the yup schema is set within the formik config and cannot be updated dynamically? Are there any plans to better support this scenario? I am thinking that without requiring the developer to manually flatten the values and schema, if we provide a mapping such as |
@dannief You can use Yups lazy function in order to create a schema at validation time. Using this allowed me to add validation schema for dynamically created inputs. |
@davidhernon Thanks for the tip. Will check out the lazy function |
@jaredpalmer I think there could be some kind of implementations like the |
Hey @davidhernon - could you please elaborate on using Yup's |
For anyone ending up here. Formic has a |
Field Array docs moved to https://jaredpalmer.com/formik/docs/api/fieldarray |
What about arrays with useFormik? |
I used useFormik and made it work like this schema:
|
Hi, so say my user API had a nested array like this:
Is there a way to implement this kind of form, where i'll be able to add 0-many pets?
The text was updated successfully, but these errors were encountered: