FieldArrays in a separate component - redux-form

Question

I'm using redux-form v6.0.1. I created a component similar to that from documentation example: http://redux-form.com/6.0.1/examples/fieldArrays/
Following the code below from the example, can I move all the fields and action buttons rendering inside <li key={index}> to the separate component to enforce that bind or arrow functions are not used (https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md)?
const renderMembers = ({ fields }) => (
<ul>
<li>
<button type="button" onClick={() => fields.push({})}>Add Member</button>
</li>
{fields.map((member, index) =>
<li key={index}>
<button
type="button"
title="Remove Member"
onClick={() => fields.remove(index)}/>
<h4>Member #{index + 1}</h4>
<Field
name={`${member}.firstName`}
type="text"
component={renderField}
label="First Name"/>
<Field
name={`${member}.lastName`}
type="text"
component={renderField}
label="Last Name"/>
<FieldArray name={`${member}.hobbies`} component={renderHobbies}/>
</li>
)}
</ul>
)
Thank you,
Darek.

Answer 1

Can I move all the fields and action buttons rendering inside <li key={index}> to the separate component to enforce that bind or arrow functions are not used?
Sure. Have you tried it and run into a problem?

Answer 2

I have a very complicated form with a lot of arrays fields inside, and I know that arrow functions are very bad for performance.
Thats why instead of
{fields.map((member, index) =>
<li key={index}>
<button
type="button"
title="Remove Member"
onClick={() => fields.remove(index)}/>
<h4>Member #{index + 1}</h4>
<Field
name={`${member}.firstName`}
type="text"
component={renderField}
label="First Name"/>
<Field
name={`${member}.lastName`}
type="text"
component={renderField}
label="Last Name"/>
<FieldArray name={`${member}.hobbies`} component={renderHobbies}/>
</li>
)}
I tried somethind like that:
{fields.map((member, index) =>
<li key={index}>
<Fields
names={`[${member}.firstname`, `${member}.lastName`]}
component={RenderNames}
index={index}
/>
</li>
)}
const RenderNames = (fields) => {
const removeItem = () => {
fields.remove(index);
}
return (
<button
type="button"
title="Remove Member"
onClick={removeItem}
/>
// how to get 'firstname' and 'lastname' here?
)
}
but couldn't get fields object in a way described in documentation