const { FieldArray, Field } = ReduxForm;

​

class Kitchens extends React.Component {

    render() {

        const { fields, meta: { touched, error } } = this.props;

        console.log(fields);

​

        const cls = 'kwfUp-cartWizardCartKitchens';

​

        return (

            <div className={cls}>

                <ul>

                    <li>

                        <button type="button" onClick={() => fields.push({})}>Add Member</button>

                        {touched && error && <span>{error}</span>}

                    </li>

                    {fields.map((member, index) =>

                        <li key={index}>

                            <button

                                type="button"

                                title="Remove Member"

                                onClick={() => fields.remove(index)}/>

                            <h4>Member #{index + 1}</h4>

                        </li>

                    )}

                </ul>

            </div>

        )

    }

}

​

const validate = values => {

    const errors = {};

​

    return errors;

};

​

class Cart extends React.Component {

    render() {

        const cls = 'kwfUp-cartWizardCart';

​

        return (

            <div className={cls}>

                <form>

                    <FieldArray name="kitchens" component={Kitchens} />

                    <div>

                        <button type="submit" className="next">Next</button>

                    </div>

                </form>

            </div>

        )

    }

}

​

const CartForm = ReduxForm.reduxForm({

    form: 'wizard',

    destroyOnUnmount: false,

    forceUnregisterOnUnmount: true,

    validate

})(Cart);

​

class Wizard extends React.Component {

    render() {

            const step = 1;

        const cls = 'kwfUp-cartWizard';

        return (

            <div className={cls}>

                {step === 1 && <CartForm />}

            </div>

        )

    }

}

​

const { createStore, combineReducers } = Redux;

const step = 1;

const formReducer = ReduxForm.reducer;

const store = createStore(combineReducers({

  step,

  formReducer

}));

store.subscribe(() => {

  console.log(store.getState());

});

const initialize = ReduxForm.initialize;

store.dispatch(initialize('wizard', {

  kitchens: [{

    "id": "2-1-1-1-5-9-2", "deliveryOption": "selfservice"

  },{

    "id": "2-1-6-1-5-9-2","deliveryOption": "selfservice"

  }]

}));

​

const Provider = ReactRedux.Provider;

ReactDOM.render(

        <Provider store={store}>

            <Wizard />

        </Provider>,

        document.getElementById('app')

    );