DDave
DDave

Reputation: 1543

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.

Upvotes: 3

Views: 3107

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281686

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

Upvotes: 1

Related Questions