redux-form sandbox

issue #1978 - initialValues field array

HTML

<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/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.6/react-redux.min.js"></script>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/redux-form/6.2.0/redux-form.js"></script>
<div id="root">
</div>

CSS

.member {
  border: 1px black solid;
  padding: 6px;
  margin-top: 6px;
}

Babel + JSX

// BEGIN SETUP
const Component = React.Component
const {reduxForm, FormSection, FieldArray, Field, reducer: formReducer} = ReduxForm
const {createStore, combineReducers} = Redux
const {Provider} = ReactRedux
const reducers = {
  form: formReducer
}
const reducer = combineReducers(reducers)
const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
// END SETUP
// BEGIN EXAMPLE

const renderField = ({fields}) => (
	<div>
    <input type="number" {...fields} step="0.1" />
	</div>
)

const Form = () => (
  <Field
    name="foobar"
    component={renderField} 
   />
)

const MyForm = reduxForm({
	form: 'foo',
  initialValues: {
  	members: [
    	{}
    ]
  }
})(Form)

// END EXAMPLE
ReactDOM.render(
	<Provider store={store}>
    <MyForm />
  </Provider>,
  document.getElementById('root')
);