redux-form sandbox

issue #1978 - initialValues field array

by Brandon Vandegrift

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 renderMembers = ({fields}) => (
	<div>
    <h2>Members</h2>
    <button onClick={() => fields.push({})}>add</button><br />
	  {fields.map((field, idx) => (
    	<div className='member' key={idx}>
      	First Name
        <Field name={`${field}.firstName`} component='input' type='text' /><br />
      	Last Name
        <Field name={`${field}.lastName`} component='input' type='text' /><br />
  			<button onClick={() => fields.remove(idx)}>remove</button><br />
    	</div>
    ))}
	</div>
)

const Form = () => (
  <FieldArray name='members' component={renderMembers} />
)

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

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