redux-form pass value to fieldarray fields

Question

I am using redux-form with an FieldArray and I'm trying to create different renderings depending on which button is clicked on.

assuming I have the following function (which is in the component attribut of a FieldArray in a form):

const renderCatalogCategories = (props) => {

const { fields } = props;

return (
<div>
    {fields.map((data, idx) =>
       <Panel key={idx} header={`${data}.type`} data={data} />
    )}


    <DropdownButton>
       <MenuItem onClick={() => fields.push({type: 'a'})}>a</MenuItem>
       <MenuItem onClick={() => fields.push({type: 'b'})}>b</MenuItem>
    </DropdownButton>
</div>) 
};

It is not possible to get the value of type which I pass in the fields.push on the MenuItems. You have an idea how I can get this value?

The value of data I get is just a string, e.g. categories[9]

Answer 1

Well posed question. 👍

What you are looking for is fields.get(idx).

However, you will need the field name (what you have called data) to give to any <Field> component to edit your values inside the array.