Needed Help to Make Redux-Form Field Arrays Sortable

[navotaras]

Hello, I am trying to wire up redux-form array fields ( see example below ) and make it sortable using react-sortable-hoc components. I am not able to make any progress. Need help and guidance.

https://redux-form.com/7.2.3/examples/fieldarrays/

[navotaras]

The first one shows the picture of how the array fields are rendering fine. The below picture shows that when I click on something to move everything vanishes. I have given the code below for both my component and store initialization

import React, { Component } from 'react'; import { Field, FieldArray, reduxForm } from 'redux-form'; import { SortableContainer, SortableElement, arrayMove } from 'react-sortable-hoc';

const renderField = ({ input, label, type, meta: { touched, error } }) => (

{label}

{touched && error && {error}}

);

const SortableItem = SortableElement(({member, fields, itr:index}) => { return (

fields.remove(index)} /> {console.log('The member name is ', member)} {console.log('the value of the index is ', index)}

Member #{index + 1}

)});

const AmpedSortableItem = WrappedSortableItemComponent => { return ({ member, fields, itr }) =>

<WrappedSortableItemComponent {...{ member, fields, itr }} />

; };

export const NewSortableItem = AmpedSortableItem(SortableItem);

const renderMembers = SortableContainer( ({ fields, onSortEnd, meta: { error, submitFailed } }) => {

    onSortEnd = ({ oldIndex, newIndex }) => {
            arrayMove(fields, oldIndex, newIndex)
    };

    return (
    <ul>
        <li>
            <button type="button" onClick={() => fields.push({})}>
                Add Member
            </button>
            {submitFailed && error && <span>{error}</span>}
        </li>
        {fields.map((member, index, fields) => {
            console.log(member, index, fields);
            return <NewSortableItem key={`item-${index}`} itr={index} fields={fields} member={member} />;
        })}
    </ul>
)}

);

const SortableFieldArraysForm = props => { const { handleSubmit, pristine, reset, submitting } = props; return (

Submit Clear Values

);

};

export default reduxForm({ form: 'fieldArraysSortable' // a unique identifier for this form })(SortableFieldArraysForm);

---

import React from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; import { Values } from 'redux-form-website-template'; import store from './playground/store'; import showResults from './playground/showResults'; import SortableFieldArraysForm from './playground/sortablelistwithreduxform' import registerServiceWorker from './registerServiceWorker';

// Playground Examples import { RenderFields, NewRenderFields } from './playground/hocexample'; const rootEl = document.getElementById('root');

ReactDOM.render(

, rootEl ); registerServiceWorker();

[mrchief]

Maybe you can adapt from here: https://codesandbox.io/s/6zxjpv31pn