would result in an object { list1: [{ field1: ... }, ..., ], field3 }

Using composition names

If working with complex objects composition names can be used. for instance . Be aware that compositions will create any non existing composition part, so the above exampe will generate a state as {testA: [undefined, { testB: $value }]}. Number keys will create arrays while string keys will create objects. This is usable with Lists and Groups as long as the types matches, and composition names inside Group and List will be scoped to their Group or List.

Using with Redux

When using with redux, a ReduxForm element should be added after redux's Provider, which should have a getState function, which tells where in the store the formReducer can be found. Also when using Redux form elements should have a name attribute, which should be unique for each form

`javascript
import { formReducer, Form, ReduxForm } from 'react-formed';
import { combineReducers, createStore, Provider } from 'redux';

const store = createStore(
combineReducers({
form: formReducer,
}),
);

export default () => (

state.form}>


You can use the createSelector method to create a selector for easier working with forms in redux.

`javascript
import { createSelector } from 'react-formed';

const { getForm } = createSelector(state => state.form);

const mapStateToProps = state => ({
myForm: getForm(state, 'myForm'),
});
`

$3

You can use build in actions for common tasks in redux

`javascript
import { actions } from 'react-formed';

dispatch(actions.clear('myForm')); // Clear all fields in a form

dispatch(actions.setForm('myForm', { // Replaces all values in the form with the provided values
fieldA: 'valueA',
fieldB: 'valueB',
fieldC: [{
title: 1,
}, {
title: 2,
}],
}));

dispatch(actions.setValue('myForm', 'fieldB', 'valueC')); // Replaces a specific value with the provided value
dispatch(actions.setValue('myForm', ['fieldC', 1, 'title'], 'valueD'));
`

Creating custom elements

It is easy to create custom elements, using the withForm decorator, which supplies the function with a value object and a setValue function

This is for instance how Input works

`javascript
import { withForm } from 'react-formed';
const Input = ({ setValue, value, ...props }) => (
{...props}
value={value || ''}
onChange={({ target }) => setValue(target.value)}
/>
);

export default withForm(Input);
`

$3

If you do not wish to bind the component using the withForm HOC, a render-prop version is also provided

`javascript
import { WithForm } from 'react-formed';
const Input = (props) => (

{(value, setValue) => (
{...props}
value={value || ''}
onChange={({ target }) => setValue(target.value)}
/>
)}

);

export default Input;
``