javascript - Trying to reuse a redux-form with functional component -

i'm trying build reusable component create simple forms, having validation , handling submit actions. able use self, when try make functional component inject props got stuck in error.

this class uses component build forms

import react 'react';  import customreduxform './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 component build forms

import react 'react';  import { reduxform, field } '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 valid value ${customfield.label}!`;        }      });        return errors    }      return reduxform({      form: props.formname,      validate    })(customform);    };    export default customreduxform;

i tried different ways export created form on customreduxform, still nothing!

return reduxform({    form: props.formname,    validate  })(customform);    // or    const formwrapped = reduxform({    form: props.formname,    validate  })(customform);    // non sense, ..  return formwrapped;    // or  return <formwrapped />;

thanks!

the problem return statement of customreduxform.

the correct 1 assign variable , use jsx syntax did in last snippet.

const wrappedform = reduxform(...)(customform); return <wrappedform /> 

the thing missed pass props of customreduxform wrappedform.

you'll need use return <wrappedform {...props} />

now it's matter of fixing other errors in code like...

const { fields, handlesubmit } = this.props

instead of using const renderfieldset , doing {fields.map(myfieldset => renderfieldset(myfieldset)

you might want use const fieldset = ... {fields.map((myfieldset, index) => <fieldset key={index} />)}

it should work expected.