redux-form sandbox

issue #1978 - initialValues field array

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.8/react-redux.js"></script>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/redux-form/6.2.0/redux-form.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui-react/0.72.0/semantic-ui-react.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.css">
<div id="root">
</div>

Babel + JSX

// BEGIN SETUP
const Component = React.Component
const {reduxForm, Field, reducer: formReducer} = ReduxForm
const {createStore, combineReducers} = Redux
const {Provider} = ReactRedux
const { Form, Checkbox, Input, Radio, Select, TextArea, Label, Dropdown } = semanticUIReact
const reducers = {
  form: formReducer
}
const reducer = combineReducers(reducers)
const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
// END SETUP

const FormField = ({
  // redux-form
  input,
  meta: { touched, error },
  // custom/semantic
  label,
  labelHidden,
  errorPosition,
  errorStyles,
  errorColor,
  placeholder,
  width,
  inline,
  fieldType,
  componentToRender,
  className,
  ...rest
}: Props) => {
  const getErrorPointerPosition = () => ({
    left: 'right',
    right: 'left',
    top: 'below',
    bottom: 'above',
    undefined: (() => (inline ? 'left' : 'above'))(),
  }[errorPosition]);

  const Error = () => (
    <Label
      basic={errorStyles.includes('basic')}
      pointing={errorStyles.includes('pointing') && getErrorPointerPosition()}
      color={errorColor}
    >
      {error}
    </Label>
  );

  return (
    <Form.Field
      width={width || null}
      inline={inline || (!!errorPosition && ['left', 'right'].includes(errorPosition))}
      className={className}
    >

      {
        /*
         If input is checkbox || radio we dont want to show the label as it
         also appears next the input itself.
        */
      }
      {(!labelHidden && !['checkbox', 'radio'].includes(fieldType)) && (
        <label htmlFor={input.id}>{label}</label>
      )}

      {
        /*
         Render error label above the input if errorPosition is left || top
        */
      }
      {
        touched &&
        (error && ['left', 'top'].includes(errorPosition) && (
          <Error />
        ))
      }

      {React.createElement(componentToRender, {
        input,
        placeholder,
        ...(['checkbox',...