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

Question

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

What can be the cause?

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>;

Could you share the complete code? In the original code, there is a button (in the renderEmployees) to modify the content of fields when clicked. But I see none in yours. — Win
– Win, Commented Aug 13, 2017 at 6:41
True - this is due to the fact I get a list of employees from the BE and I inject it via initialValues prop - I thought its out of scope of this question, am I wrong? — chenop
– chenop, Commented Aug 13, 2017 at 8:02

chenop · Accepted Answer · 2017-08-13 18:11:59Z

1

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';

answered Aug 13, 2017 at 18:11

chenop

5,2234 gold badges51 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andre Pena · Accepted Answer · 2017-08-13 15:43:01Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related