import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import { reduxForm, Fields, FieldArray, reducer as formReducer } from 'redux-form';

const reducers = {
  form: formReducer
};

const reducer = combineReducers(reducers);

const store = createStore(reducer);

const renderSharedComponent = (fields) => {
  console.log(fields);
  return (<div>Shared Component</div>);
};

const renderHashes = ({ fields }) => (
  <div>
    {
      fields.map((field) => (
        <Fields
          key={ field }
          names={ [`${field}.value`, `${field}.valueIsRegex`] }
          component={ renderSharedComponent }
        />
      ))
    }
  </div>
);

const ReactComponent = () => (
  <div>
    <FieldArray
      name="hashes"
      component={ renderHashes }
    />
    <Fields
      names={ ['value', 'valueIsRegex'] }
      component={ renderSharedComponent }
    />
  </div>
);

const ReduxForm = reduxForm({
  form: 'default',
  initialValues: {
    hashes: [{}]
  }
})(ReactComponent);

ReactDOM.render((
  <div>
    <Provider store={ store }>
      <ReduxForm />
    </Provider>
  </div>
), document.getElementById('content'));

{
  value: { input: {...}, meta: {...} },
  valueIsRegex: { input: {...}, meta: {...} },
  names: [ 'value' , 'valueIsRegex' ]
}

{
  hashes: [
      {
        value: { input: {...}, meta: {...} },
        valueIsRegex: { input: {...}, meta: {...} }
      }
  ],
  names: [ 'hashes[0].value' , 'hashes[0].valueIsRegex' ]
}

import structure from "redux-form/lib/structure/plain";

function RenderRow({ names, ...props }) {
  const fields = {};
  names.forEach(n => (fields[n] = structure.getIn(props, n)));
}