React nested form values

Question

How can I get nested form elements values in ReactJS?

Example

Let say I have a form with following elements:

<form onSubmit={handleSubmit(e)}>
  <input ref="name" type="text" />
  { /* possibly unlimited number of emails */ }
  <input ref="email[]" type="text" />
  <input ref="email[]" type="text" />
  { /* possibly unlimited number of book objects */ }
  <fieldset>
    <input ref="title" type="text" />
    <input ref="author" type="text" />
  </fieldset>
  <fieldset>
    <input ref="title" type="text" />
    <input ref="author" type="text" />
  </fieldset>
</form>

I want to get values of these fields onSubmit. The easiest way and most intuitive would be through:

this.refs

But it will flatten all refs and return only last of the array elements. So it will return something like:

{ name: '', email[]: '', title: '', author: '' }

What I want to get should look like this:

{ name: '',
  email:['', ''],
  books: [
    { title: '', author: '' },
    { title: '', author: '' }
  ]
}

Or something similar.

Maybe using refs is not the best option, but I'm not sure about any other alternatives.

EDIT Executing:

e.target.childNodes

Returns something similar to what I want to achieve but it returns plain HTML nodes so getting values out of them is quite a lot of work (writing some custom method for processing nodes tree).

Gilad Artzi · Accepted Answer · 2016-06-11 11:16:20Z

2

If the input would have some kind of ID or a key, you could probably do:

<input key="[YOUR_KEY]" type="text" onChange={ (e) => { this.setState({
    [YOUR_KEY]: e.currentTarget.value
}); } } />

And then you could reference all the values directly from the state.

The key can even be arbitrary as an incremental number:

<input key="email_1" type="text" onChange={ (e) => { this.setState({ email_1: e.currentTarget.value }); } } />
<input key="email_2" type="text" onChange={ (e) => { this.setState({ email_2: e.currentTarget.value }); } } />
<input key="email_3" type="text" onChange={ (e) => { this.setState({ email_3: e.currentTarget.value }); } } />
<input key="email_4" type="text" onChange={ (e) => { this.setState({ email_4: e.currentTarget.value }); } } />

Then, you can reference the second email field for example with this.state.email_2.

answered Jun 11, 2016 at 11:16

Gilad Artzi

3,0841 gold badge17 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

jmarceli Over a year ago

I will use redux store as a model for my form but I don't want to update app state on each change. I think it should be somehow possible to get all the values only on submit.

Gilad Artzi Over a year ago

You can use redux, and still use this methodology. When you update your redux store, instead of reading the data from ref, read it from the component's state.

jmarceli Over a year ago

I know it will work with Redux. This is my current solution but I'm looking for the way of retrieving values directly without need to keep it in sync with the store.

Gilad Artzi Over a year ago

This is what I'm saying, you don't have to keep it in sync with the store! You only keep it in sync with the specific component's state. When you finally decide to update the store (user has submitted the form or whatever), then all the data is available in the state and the store can be updated with a single action.

jmarceli Over a year ago

OK. I didn't get it. Thanks for the explanation.

|

Collectives™ on Stack Overflow

React nested form values

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related