Handling multiple forms in React

Question

I'm trying to make two simple forms with a Save button to work in React, but it appears that the Save button component is unable to see the two forms.

My Form component is as follows:

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

const validate = values => {
  const errors = {};
  if (!values.name) {
    errors.name = "Required";
  }

  if (!values.age) {
    errors.age = "Required";
  }

  return errors;
};

const renderField = ({
  input,
  label,
  type,
  value,
  meta: { touched, error, warning }
}) => (
  <div>
    <label>{label}</label>
    <div>
      <input {...input} placeholder={label} type={type} />
      {touched && (error && <span className="error">{error}</span>)}
    </div>
  </div>
);

const Form1 = props => {
  const { handleSubmit } = props;
  return (
    <div>
      <form onSubmit={handleSubmit}>
        <Field name="name" component={renderField} type="text" label="Name" />
        <Field name="age" component={renderField} type="text" label="Age" />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export default reduxForm({
  form: "step1", // a unique identifier for this form
  validate
})(Form1);

And my SaveButton is as follows:

import React, { Component } from "react";

export default class SaveButton extends Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.submit = this.submit.bind(this);
  }

  submit() {
    console.log(this.props);
    const { dispatch, forms } = this.props;

    forms.forEach(({ formName, isValid, values, errors }) => {
      if (isValid) {
        console.log(values);
      } else {
        //        dispatch(touch(formName, ...Object.keys(errors)));
      }
    });
  }

  render() {
    return (
      <button type="button" onClick={this.submit}>
        Save
      </button>
    );
  }
}

Sandbox example

Clicking Save gives Cannot read property 'forEach' of undefined because forms is undefined and this.props is empty. Anyone know why the forms can't be seen from SaveButton?

Prakash Kandel · Accepted Answer · 2019-06-21 05:45:07Z

This is because your Save button is not the part of the form element. So to get the value you have to do it manually. Here is how I do it,

I will pass a handleSave function as a prop from App.js like,

import React, { Component } from "react";
import "./App.css";
import Form1 from "./components/form1/Form";
import Form2 from "./components/form2/Form";
import SaveButton from "./components/SaveButton";
import { connect } from "react-redux";
import {
  submit,
  isValid,
  getFormNames,
  getFormValues,
  getFormSyncErrors,
  touch
} from "redux-form";

class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <div className="App-intro">
          Form 1:
          <Form1 onSubmit={this.step1} />
          <hr />
          Form : 2
          <Form2 onSubmit={this.step2} />
          <hr />
          <SaveButton handleSave={this.handleSave} />
        </div>
      </div>
    );
  }

  step1(values) {
    console.log(values);
  }

  step2(values) {
    console.log(values);
  }
  handleSave = () => {
    const { dispatch, forms } = this.props;
    console.log(forms);

     forms.forEach(({ formName, isValid, values, errors }) => {
       if (isValid) {
         console.log(values);
       } else {
         //        dispatch(touch(formName, ...Object.keys(errors)));
       }
     });
  }
}

const mapStateToProps = state => {
  return {
    forms: getFormNames()(state).map(formName => ({
      formName,
      isValid: isValid(formName)(state),
      values: getFormValues(formName)(state),
      errors: getFormSyncErrors(formName)(state)
    }))
  };
};

export default connect(mapStateToProps)(App);`

and in SaveButton.js, I will simply call that function,

import React, { Component } from "react";

export default class SaveButton extends Component {
  constructor(props) {
    super(props);
    this.props = props;
  }

  submit = () => {
    this.props.handleSave();
  };

  render() {
    return (
      <button type="button" onClick={this.submit}>
        Save
      </button>
    );
  }
}

Collectives™ on Stack Overflow

Handling multiple forms in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related