Trying to reuse a redux-form with functional component

Question

I'm trying to build a reusable component to create simple forms, having validation and handling submit actions. I able to use it by it self, but when I try to make a functional component to inject props I got stuck in this error.

This class uses the component to build forms

 import React from 'react'; import CustomReduxForm from './CustomReduxForm'; class LoginForm extends React.Component { getFields() { return [ { name : 'username', type : 'text', label : 'User', mandatory : true }, { name : 'password', type : 'password', label : 'Password', mandatory : true } ]; } handleFormSubmit(values) { console.log(values) } render() { return ( <div> <div>Test</div> <CustomReduxForm formName="LoginForm" fields={this.getFields()} onSubmit={this.handleFormSubmit} /> </div> ); } } export default LoginForm; 

This is the component to build forms

 import React from 'react'; import { reduxForm, Field } from 'redux-form'; function CustomReduxForm(props) { class CustomForm extends React.Component { render() { const { handleSubmit } = this.props; return ( <div style={{ margin: '30px' }}> <form onSubmit={handleSubmit(props.onSubmit)}> {fields.map(myField => renderFieldset(myField))} <button className="btn btn-primary" type="submit">Submit</button> </form> </div> ); } } const renderInput = field => { return ( <div className={`form-group ${field.meta.touched && field.meta.invalid ? 'has-danger' : ''}`}> <input {...field.input} type={field.type} className="form-control" /> {field.meta.touched && field.meta.error && <div className="text-help">{field.meta.error}</div>} </div> ); } const renderFieldset = customField => { return ( <div> <label htmlFor={customField.name}>{customField.label}</label> <Field name={customField.name} component={renderInput} type={customField.type} /> </div> ); } const validate = values => { const errors = {} props.fields.forEach((customField) => { if(customField.mandatory && ! values[customField.name]) { errors[customField.name] = `You must enter a valid value for ${customField.label}!`; } }); return errors } return reduxForm({ form: props.formName, validate })(CustomForm); }; export default CustomReduxForm; 

I already tried different ways to export the created form on CustomReduxForm, but still nothing!

 return reduxForm({ form: props.formName, validate })(CustomForm); // or const FormWrapped = reduxForm({ form: props.formName, validate })(CustomForm); // Non sense, but .. return FormWrapped; // or return <FormWrapped />; 

Thanks!

Answer 1

The problem is the return statement of CustomReduxForm .

The correct one is to assign it to a variable and use JSX syntax like what you did in the last snippet.

const WrappedForm = reduxForm(...)(CustomForm);
return <WrappedForm />

The only thing you missed is to also pass the props of CustomReduxForm to the WrappedForm .

You'll need to use return <WrappedForm {...props} />

Now it's a matter of fixing the other errors in your code like...

const { fields, handleSubmit } = this.props

Instead of using const renderFieldset and doing {fields.map(myFieldset => renderFieldset(myFieldset)

You might want to use const Fieldset = ... then {fields.map((myFieldset, index) => <Fieldset key={index} />)}

It should now work as expected.

Answer 2

Every React component has to have render() method.

So make sure your functional component CustomReduxForm has render method.

I guess you have to wrap the return in the render method:

function render() {
    return reduxForm({
        form: props.formName,
        validate
    })(CustomForm);
}

---

However , I'm not sure why you create a functional component, that wraps another class component and so on.

Look at the official redux form documentation , how is the conventional way of creating forms:

import React from 'react'
import { Field, reduxForm } from 'redux-form'

const SimpleForm = (props) => {
  const { handleSubmit, pristine, reset, submitting } = props
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>First Name</label>
        <div>
          <Field name="firstName" component="input" type="text" placeholder="First Name"/>
        </div>
      </div>
      <div>
        <label>Last Name</label>
        <div>
          <Field name="lastName" component="input" type="text" placeholder="Last Name"/>
        </div>
      </div>
      <div>
        <label>Email</label>
        <div>
          <Field name="email" component="input" type="email" placeholder="Email"/>
        </div>
      </div>
      <div>
        <label>Sex</label>
        <div>
          <label><Field name="sex" component="input" type="radio" value="male"/> Male</label>
          <label><Field name="sex" component="input" type="radio" value="female"/> Female</label>
        </div>
      </div>
      <div>
        <label>Favorite Color</label>
        <div>
          <Field name="favoriteColor" component="select">
            <option></option>
            <option value="ff0000">Red</option>
            <option value="00ff00">Green</option>
            <option value="0000ff">Blue</option>
          </Field>
        </div>
      </div>
      <div>
        <label htmlFor="employed">Employed</label>
        <div>
          <Field name="employed" id="employed" component="input" type="checkbox"/>
        </div>
      </div>
      <div>
        <label>Notes</label>
        <div>
          <Field name="notes" component="textarea"/>
        </div>
      </div>
      <div>
        <button type="submit" disabled={pristine || submitting}>Submit</button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button>
      </div>
    </form>
  )
}

export default reduxForm({
  form: 'simple'  // a unique identifier for this form
})(SimpleForm)