v6 — FieldArray component being passed object containing fields instead of fields

[lpil]

Hello!

I followed the example on how to use the FieldArray component with the latest alpha and the value that it receives in my code seems to be different to that which the example expects.

Here is my project: https://github.com/lpil/arrayfield-test

When I run it I get the following error: app.js:34 Uncaught TypeError: members.map is not a function

Here is the line that throws it: https://github.com/lpil/arrayfield-test/blob/master/src/app.js#L28

If I print the value passed to the ArrayField component property I get an object that looks like this:

{
  fields: {
    map: function() { ... },
    ...
  },
  name: "members",
}

Has the API for this function changed, and the example is now out of date? What is the correct way to do this?

Thanks, Louis

[jakesamz]

This may work...

const renderArray = props => {
    props.fields.map((index)=>{
        <div>{index}</div>
    });
}
<FieldArray name="members" component={renderArray}/>

[babsonmatt]

@lpil Check out the latest docs: http://redux-form.com/6.0.0-alpha.15/examples/fieldArrays/

[lpil]

Great! So I presume this problem of mine arose from a change to the API of ArrayField? i.e. it now has a fieldsprop, while previously it did not?

[ooflorent]

So I presume this problem of mine arose from a change to the API of ArrayField?

This is a breaking change introduced in v6.0.0-alpha.15. Please read the release note for the full story behind this change. Thanks!

[lpil]

I see! Thank you for the help :)

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.