CODEWITHSUNDEEP
reactjsreduxredux-form
chenop
chenop

Reputation: 5143

Redux Form - FieldsArray - fields is empty, length is 0

I tried to follow FieldArray example but I got fields length zero in renderEmployees - nothing is rendered.

What can be the cause?

enter image description here

class EmployeesContainer extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                {this.props.employees && this.props.employees.length > 0 &&
                    <FieldArray name="employees" component={renderEmployees}/>
                }
            </div>
        );
    }
}

const renderEmployees = ({ fields }) =>
    <div>
        {fields.map((employee, index) =>
            <div key={index}>
                <Field name={employee.first_name} type="text" component={renderField} className="cell" inputValue={employee.first_name} />
                <Field name={employee.uid} type="text" component={renderField} className="cell" inputValue={employee.uid} />
            </div>
        )}
    </div>;

Upvotes: 1

Views: 910

Answers (2)

chenop
chenop

Reputation: 5143

Well, the problem was using a bad form reducer, probably taken from an outdated example:

import { reducer as formReducer } from 'redux-form/immutable';

Its a stupid mistake but I expect a descent error message. ofcourse the right usage is:

import { reducer as reduxFormReducer } from 'redux-form';

Upvotes: 1

Andre Pena
Andre Pena

Reputation: 59336

Nothing is being rendered, probably, because you have no employees and you don't render the renderEmployees component when the employee list is empty.

If you want to have at least 1 employee, in such a way that it will render an empty item, you can pass initialValues to the form, passing the array with an empty item.

This is a modified version of the FieldsArray example you provided, in which there's 1 initial member.

const initialValues = {
  "members": [
    {
      "firstName": "",
      "lastName": "",
      "hobbies": []
    }
  ]
}

ReactDOM.render(
  <Provider store={store}>
    <div style={{ padding: 15 }}>
      <h2>Field Arrays</h2>
      <FieldArraysForm onSubmit={showResults} initialValues={initialValues} />
      <Values form="fieldArrays" />
    </div>
  </Provider>,
  rootEl,
);

Example in CodeSandBox:

https://codesandbox.io/s/DkWkr6Kr5

Upvotes: 0

Related Questions