React final form split field values

Question

I have a react and redux application with react final form where I have a field named 'cars' which is a select and on spy fire a submit event if data is dirty. All good with the values and stuff but I need to split that into the types so the form returns something like coupe: ['BMW'], sedan: ['Audi'] not just the field name with values such as cars: ['BMW', 'Audi']

{
  type: "Coupe"
  value: "BMW"   
},
{
  type: "Sedan"
  value: "Audi"   
}

Maybe anyone has a suggestion how to mutate that and when inside react final forms? or should it be done inside a reducer or saga?

Yevgen Gorbunkov Yevgen Gorbunkov · Accepted Answer · 2020-09-02T20:58:14

Assuming you get your form data as

[
    {
        type: "Coupe",
        value: "BMW"
    }, {
        type: "Sedan",
        value: "Audi"
    }
]

and you need to turn type value into the key name, so you get

[{ coupe: 'BMW'}, {sedan: 'Audi'}]

You may use Array.prototype.map() (inside your submit handler, or reducer, or wherever it works better for you):

const formData = [{type:"Coupe",value:"BMW"},{type:"Sedan",value:"Audi"}],

      remappedData = formData.map(({type,value}) => 
        ({[type.toLowerCase()]: value}))
      
console.log(remappedData)

.as-console-wrapper{min-height:100%;}

React final form split field values

1 Answers