CODEWITHSUNDEEP
javascriptreactjsfunctionstateformik
Lorenzo.Martinez
Lorenzo.Martinez

Reputation: 13

Updating Form values with functions. {React, withFormik}

I am attempting to make a multi-page form with a switch statement and I am having trouble with updating the props.values.step, what I am using as my switch statement variable, with a function I continue to get a "xyz is not a function" error attached is the code any help would be great and thank you.

<--------------App.js------------------>

import React from "react";
import MyEnhancedForm from "./pages/FormHolder";

function App() {
  return (
    <div className="App">
      <MyEnhancedForm />
    </div>
  );
}

export default App;

<--------------FormHolder.js------------------>

import Form from "./Form";
import { withFormik, Field } from "formik";
import * as Yup from "yup";
import VerifyPage from "./Verifypage";

const FormHolder = props => {
  function handleIncrease() {
    props.values.step += 1;
  }

  switch (props.values.step) {
    case 1:
      return <Form {...props} handleIncrease={handleIncrease} />;
    case 2:
      return <VerifyPage {...props} />;
    default:
      return null;
  }
};

const MyEnhancedForm = withFormik({
  mapPropsToValues: () => ({ step: 1, name: "" }),
  validationSchema: Yup.object().shape({
    name: Yup.string()
      .max(55, "Error: Name is too long.")
      .min(3, "Error: Name to short.")
  }),
  handleSubmit: () => {}
})(FormHolder);

export default MyEnhancedForm;

<-----------Form.js--------------->

import React from "react";
import { Field } from "formik";
import { DisplayFormikState } from "./helper";
import { Card, FormGroup, Input, Label, Button } from "reactstrap";

const Form = (props, { handleIncrease }) => {
  const nextStep = e => {
    props.errors.name ? console.log(props.errors) : handleIncrease();
  };

  return (
    <Card>
      <FormGroup>
        <Label for="name"></Label>
        <Input
          tag={Field}
          bsSize="lg"
          type="text"
          name="name"
          id="name"
          component="input"
        />
        <Button type="submit" onClick={nextStep}>
          Next
        </Button>
        <DisplayFormikState {...props} />
      </FormGroup>
    </Card>
  );
};

export default Form;

<--------------VerifyPage.js------------------>

Haven't made it to the verify page yet so that's why there is very little on it.

import React from "react";
import * as Yup from "yup";
import { withFormik, Field } from "formik";
import { DisplayFormikState } from "./helper";
import { Card, FormGroup, Input, Label, Button } from "reactstrap";

const VerifyPage = props => {
  const prevStep = event => {
    event.preventDefault();
    props.handleDecrease();
  };
  return (
    <Card>
      Verify Page
      <DisplayFormikState {...props} />
    </Card>
  );
};

export default VerifyPage;

<--------------helper.js------------------>

import React from "react";

export const DisplayFormikState = props => (
  <div style={{ margin: "1rem 0" }}>
    <h3 style={{ fontFamily: "monospace" }} />
    <pre
      style={{
        background: "#f6f8fa",
        fontSize: ".65rem",
        padding: ".5rem"
      }}
    >
      <strong>props</strong> = {JSON.stringify(props, null, 2)}
    </pre>
  </div>
);

Upvotes: 1

Views: 482

Answers (1)

helloitsjoe
helloitsjoe

Reputation: 6529

Your problem is in Form.js:

const Form = (props, { handleIncrease }) => {
  const nextStep = e => {
    props.errors.name ? console.log(props.errors) : handleIncrease();
  };

handleIncrease is a prop, so you should do something like this instead:

const Form = props => {
  const nextStep = e => {
    props.errors.name ? console.log(props.errors) : props.handleIncrease();
  };

Another problem: You're mutating values.step, which will cause further issues (e.g. updating it won't cause a re-render). There's no real reason to have Formik manage step, since it's not a form input value. Instead, you could just store it in state:

const FormHolder = props => {
  const [step, setStep] = React.useState(1);

  function handleIncrease() {
    setStep(step => step + 1);
  }

  function handleDecrease() {
    setStep(step => step - 1);
  }

Upvotes: 1

Related Questions