fix(Form): Form doesn't serialize array form fields

Steps to Reproduce

1. Build a form with array name fields (data[one], data[two])

<Form.Input name="data[one]"></Form.Input>
<Form.Input name="data[two]"></Form.Input>

Expected Form should serialize those fields into a single object

formData: {
  data: {
    one: 'value',
    two: 'value'
  }
}

Result Form does this:

formData : {
  data[one]: 'value',
  data[two]: 'value'
}

Testcase http://codepen.io/anon/pen/VmxEKQ (see output in console)

[levithomason]

All form serialization and validation will be accomplished using the controlled component pattern where the value of each form control is captured and placed in state somewhere, probably a higher order form component. You can refer to react-reformed for some ideas.

We’ll likely bake something like this into SUIR and attempt to simplify the API and usage a bit to reduce the workload of wiring this up.

So, in that case, instead of using the name attribute in the DOM to find values and serialize them, your virtual DOM change handlers will be placing the value in the correct place in the form’s state model. This is preferred since the data is then handled inside of React, instead of the browser’s real DOM. Aside from the fact that using the real DOM is an antipattern, using React’s virtual DOM makes testing a breeze, keeps the app fast, and is better for integrating other tools like validation and local storage.

You might also find some of these other react form libraries helpful: https://github.com/erikras/redux-form/ https://github.com/christianalfoni/formsy-react https://github.com/prometheusresearch/react-forms

Cheers!

[levithomason]

Glad to hear it 😃