Search code examples
reactjsredux-form

redux-form get the name of form for the input


in the field component , there is a way to get the name of form? I use the same input component for differents forms, actually I use a hardcode form name, but i'd like to find a way to get the name of form that contains the input

class FormField extends Component {
    process = () => {
      nameForm= 'myForm'; // hardcode, i'd like to get the form parent
      const values = this.props.myState.form[nameForm].values;

      (...)
    }
    render()
        <input
          {...myInput}
          type={typeInput}
          autoComplete="off"
          processInput={this.process()}
        />

  }


class Form extends Component {

  render() {

    return (

      <form onSubmit={handleSubmit}>
        <div className="appBodyTitleSeparator" />

        <div className="formSection">
          <Field
            name="customer_id"
            component={FormField}
            myState={this.props.myState}

          />
    (...)
}

my Form is in another component separated, i'd like not use props to get the name.


Solution

  • In you form you can access the formName like props.form in your Form component which you can pass as props to the Field component.

    class FormField extends Component {
        process = () => {
          const nameForm = this.props.formName
          const values = this.props.myState.form[nameForm].values;
    
          (...)
        }
        render()
            <input
              {...myInput}
              type={typeInput}
              autoComplete="off"
              processInput={this.process()}
            />
    
      }
    
    
    class Form extends Component {
    
      render() {
        const {form} = this.props;
        return (
    
          <form onSubmit={handleSubmit}>
            <div className="appBodyTitleSeparator" />
    
            <div className="formSection">
              <Field
                name="customer_id"
                formName={form}
                component={FormField}
                myState={this.props.myState}
    
              />
        (...)
    }
    

    See this example