redux-form 7 force array of checkboxes to return Object instead of Array

Question

I have an array of checkbox rendered as:

<form>
  {items.map(item => {
    <Field component="input" 
           type="checkbox"
           name=`items.{item.id}`
  })}
</form>

This gives me values as an Array:

 {
           //index: 0,   1,     ,…, 120, 121, …    ,231, …                      
     item: [undefinded,undefined,…,true,undefined,…,true,undefined,…]
 }

Instead I would prefer an Object, (mainly to avoid a large array being created):

{
    120: true,
    131: true,
    165: false 
}

Is there a way to force redux-form output object when itemId is integer.

Note: If itemId is passed as string then redux-form does return an Array.

Similar post but solution does not work with redux-form 7.

Dobrin Tinchev · Accepted Answer · 2020-11-02 14:30:18Z

1

I came across this while looking for a solution to the same problem.

What eventually worked for me is to initialize the object when passing the initial values to the form

const ItemsForm = ({ items }) => {
    return <form>
        {items.map(item => {            
            <Field component="input"
                type="checkbox"
                name={`items.${item.id}`} />
        })}
    </form>
}

export default reduxForm({
    form: 'itemsForm'
})(ItemsForm)

Initialize the form like this:

<ItemsForm initialValues={{items: {}}} />

answered Nov 2, 2020 at 14:30

Dobrin Tinchev

4014 silver badges11 bronze badges

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

Comments

Jonny Asmar · Accepted Answer · 2017-12-23 01:40:16Z

0

You could just use the filter function when you're mapping the form field from the state:

checkboxArray.filter(checkbox =>{
    return checkbox; // if its undefined, it'll get dropped from the array
});

Associative arrays and objects are actually identical in Javascript, so no more work is needed, so having filtered out all of the undefined items in the array gets you the object you're looking for.

answered Dec 23, 2017 at 1:40

Jonny Asmar

2,00014 silver badges17 bronze badges

Comments

nihlton · Accepted Answer · 2019-09-25 17:32:54Z

0

issue is that the field name is a number. try prefixing it.

instead of '102' >> 'myField_102'

answered Sep 25, 2019 at 17:32

nihlton

6596 silver badges7 bronze badges

Collectives™ on Stack Overflow

redux-form 7 force array of checkboxes to return Object instead of Array

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related