How do I make a reusable form component group with Redux-Form v6? -

i'm trying make reusable form component group (section?) use redux-form v6. ideally don't want aware of where used within form, can use anywhere within form (at root or nested). how can this?

for example, have address component uses redux-form's field address1, city, state, zip, etc, this:

class address extends react.component {   render() {     return (       <field         component={myreduxforminput}         name="address1" // <== how name generic case?       />     )   } } 

here's simplified myreduxforminput:

module.exports = field => {   return <input {...field.input} /> } 

i'm creating form need collect user's address, multiple addresses professional references. so, want use address once @ root , multiple times in nested fashion. trick is, can't use address i've written above, because while work root address, won't work nested situations. shown in fieldarray example docs, name supplied field needs name={`${member}.address1`}. wouldn't work @ root.

one idea occurred me address component take member argument, blank @ root. i'll try , report back. thinking redux-form field components automatically aware of nesting level; should hierarchy , able know necessary name prefix.

my idea of component taking member prop (as in, name prefix depending on nesting) works great. wish would've thought of many hours ago.

here's address looks like:

class address extends react.component {   static proptypes = {     member: proptypes.string   }    static defaultprops = {     member: ''   }    render() {     const { member } = this.props     const name = n => `${member}${n}`      return (       <field         component={myreduxforminput}         name={name('address1')}       />     )   } } 

and here's how might used:

const references = ({ fields }) => {   return (     <div>       fields.map((member, index) => {         return <address member={member} key={index} />       })     </div>   ) }  <address /> <fieldarray name="professionalreferences" component={references} />