Skip to content
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

[Next] Add docs about handling arrays #155

Closed
jaredpalmer opened this issue Sep 5, 2017 · 10 comments
Closed

[Next] Add docs about handling arrays #155

jaredpalmer opened this issue Sep 5, 2017 · 10 comments
Labels
Focus: Documentation Issues regarding documentation
Projects

Comments

@jaredpalmer
Copy link
Owner

Turn #11 into a section in the docs (Note: handleChangeValue has since been renamed setFieldValue)

## Handling arrays

There are a few methods to handling arrays with Formik.

### Custom component + `setFieldValue`
https://github.com/jaredpalmer/formik/issues/11#issuecomment-312489299

### Flatten and Prefix
https://github.com/jaredpalmer/formik/issues/11#issuecomment-312449018

Related: #59 #58 #40 #11 #116 #147 #151

@jaredpalmer jaredpalmer added the Focus: Documentation Issues regarding documentation label Sep 5, 2017
@jaredpalmer jaredpalmer added this to the 0.9 milestone Sep 5, 2017
@jaredpalmer jaredpalmer added this to Next week in Formik 0.9 Sep 5, 2017
@jaredpalmer jaredpalmer moved this from Next week to To do in Formik 0.9 Sep 5, 2017
@jaredpalmer jaredpalmer added this to ToDo in Formik 1.0 Sep 20, 2017
@martaver
Copy link

martaver commented Oct 21, 2017

In the mean time, does anybody have any clear, working examples anywhere of either of these two approaches?

@brikou
Copy link
Contributor

brikou commented Oct 22, 2017

Agree, a gist would be great! And BTW formik is really nice! thanks

@jaredpalmer jaredpalmer removed this from the 0.9 milestone Nov 27, 2017
@whogaurav
Copy link

whogaurav commented Dec 13, 2017

I really liked Formik at start, it is really good with all the features and best part no redux or unnecessary complexity, But now when it comes to create nested and handling arrays poor documentation is a deal breaker for me.

My json is not that complicated but still I am unable to figure out the best way to create the form using Formik. Approach of transforming the json keys and the transforming them again on submit doesn't sound less code to me. And other approach of creating child form component, I am not sure how to manage form state with that, there is no working example.

Nested approach also doesn't work for me for the below use case

{
	"trips": {
		"id": 123,
		"name": "test"
	},
	"offers": {
		"id": 123,
		"name": "BOGO"
	},
	"travellers": [
		{
			"name": "Andrew",
			"age": 21,
			"sex": "M"
		},
		{
			"name": "Martin",
			"age": 22,
			"sex": "M"
		}
	]
}

I had to move to React Form, their documentations is really good as you can see here
https://react-form.js.org/#/nested-form

@brikou
Copy link
Contributor

brikou commented Dec 13, 2017

@gauravarora91 You are right documentation is poor but still formik is powerful. @jaredpalmer thank you for you library and if you need me to help you writing example feel free to ping me.

@jaredpalmer
Copy link
Owner Author

I have not documented arrays because the feature is not yet complete 😂

@dimitrisnl
Copy link

Any documentation on dynamic fields? I really don't know how to proceed with formik in this case.

jaredpalmer added a commit that referenced this issue Feb 1, 2018
* Close #200. Add Field level validation

* Regenerate doctoc

* Remove handleChangeValue completely

* v0.11.0-alpha.1

* Add missing name in call to setFieldError (#290)

* v0.11.0-alpha.2

* #281 Add array helpers MVP, update ts setup for better DX (#298)

* v0.11.0-alpha.3

* Actually export FieldArray

* v0.11.0-alpha.4

* Upgrade to React 16, TypeScript 2.6.2 (#300)

* #283 Update to React 16, TypeScript 2.6.2

* Update Travis build to use npm instead of yarn

* Move back to yarn (#301)

* Fix travis script to use yarn.

* Add form to TS types of FieldArray

* v0.11.0-beta.1

* Close #281 #155. Add docs about array helpers

* Add field array examples and update toc

* Fix unshift in FieldArray (#337)

* Fix FieldArray component prop (#341)

* Fix FieldArray component prop

* nit: test names [skip ci]

* Allow bracket path support (#334)

* feat(Field): Allow bracket path support

* chore(deps): Add types for lodash.topath

* chore(deps): yarn.lock

* Fix #280. Fix the definition dirty and isValid (#365)

* Fix #280. Change the meaning of dirty and isValid

* Lock in to path dep

* Update tests for new definition of dirty

* Update docs

* Fixed typo in FieldArray code (#380)

* Fix setDeep mutations with nested values (#373)

* Fix start task

* Get rid of mutators file

* v0.11.0-rc.1

* #285 #122 Add example multistep / form wizard

* #378 remove setFieldTouched from FieldArray

* v0.11.0-rc.2

* #223 Fix checkbox validation error (again)

* Add onReset callback. (#328)

* feat(formik): Add onReset callback.

* feat(formik): Use promise sniffing for onReset prop.

This passes returned promise data to resetForm, allowing the promise to add new nextValues.
@etaheri
Copy link

etaheri commented May 25, 2018

For anyone ending up here. Formic has a <FieldArray /> component that solves this! https://github.com/jaredpalmer/formik#fieldarray- 😊

@adarrra
Copy link

adarrra commented May 21, 2019

now docs are here https://jaredpalmer.com/formik/docs/api/fieldarray

@MappingSteve
Copy link

Ross Bulat's example of dynamic use of FieldArray, as a codesandbox: https://codesandbox.io/s/formik-fieldarray-rossbulat-6mqfw

@MappingSteve
Copy link

MappingSteve commented Nov 3, 2019

Codesandbox of example from fieldarray docs. Changed slightly to ALWAYS show "Add Friend" button at bottom of list: https://codesandbox.io/s/formik-fieldarray-from-docs-p4chd

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Focus: Documentation Issues regarding documentation
Projects
No open projects
Development

No branches or pull requests

8 participants