How to save composite objects with Redux-Form?

Question

Im using redux-form for my app, and everything looks great. But I dont like the way it handle with the inputs, or maybe Im doing a bad design.

I have this simple form on my app (as an example).

form onSubmit={handleSubmit} onChange={handleChange}>
    <div>
      <label htmlFor="firstName">First Name</label>
      <Field name="firstName"
       component="input" type="text" 
       ref='firstName'
       withRef
       />
    </div>
    <div>
      <label htmlFor="lastName">Last Name</label>
      <Field name="lastName" component="input" type="text" />
    </div>
    <div>
      <label htmlFor="email">Email</label>
      <Field name="email" component="input" type="email" />
    </div>
    <FlatButton
      label={intl.formatMessage({ id: 'submit' })}
      type='submit'
      primary
    //disabled={!initialized}
    />

  </form>

It looks good, but when I save it to firebase, it will save it as

email:blablabla@blabla
firstName:blablabla
lastName:bla

This is not what I want. I want something like a json with:

{userData: {
    email:blablabla@blabla,
    firstName:blablabla,
    lastName:bla
}}

I have my own reason to want to do like this (dynamic forms).

Someone have a good idea on how to deal with this? I love redux-forms, and dont want to make aallllll the way with actions, reducers and this kind of stuff.

Thanks

Tom Mendelson · Accepted Answer · 2018-03-22 22:23:52Z

1

In redux-form, there is an FormSection component, just for your issue.

in your case, it's should look like this:

<form onSubmit={handleSubmit} onChange={handleChange}>
    <FormSection name='userData'>
    <div>      
      <label htmlFor="firstName">First Name</label>
      <Field name="firstName"
       component="input" type="text" 
       ref='firstName'
       withRef
       />
    </div>
    <div>
      <label htmlFor="lastName">Last Name</label>
      <Field name="lastName" component="input" type="text" />
    </div>
    <div>
      <label htmlFor="email">Email</label>
      <Field name="email" component="input" type="email" />
    </div>
    <FlatButton
      label={intl.formatMessage({ id: 'submit' })}
      type='submit'
      primary
    //disabled={!initialized}
    />
  <FormSection>
</form>

answered Mar 22, 2018 at 22:23

Tom Mendelson

6254 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

How to save composite objects with Redux-Form?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related