Using useFormik() with <Field /> getting error: formik.getFieldProps is not a function

Question

Hey there I am new to formik library, and I am trying to use react-draft-wysiwyg component with Formik. Here is my code.

RichTextEditor.js

import React, { useState } from "react";
import { EditorState, convertToRaw, ContentState } from "draft-js";
import { Editor } from "react-draft-wysiwyg";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
import draftToHtml from "draftjs-to-html";
import htmlToDraft from "html-to-draftjs";
import { useField } from "formik";

const RichTextEditor = (props) => {
  const [field, meta, helpers] = useField(props);

  const { value } = meta;
  const { setValue } = helpers;

  const prepareDraft = (value) => {
    const draft = htmlToDraft(value);
    const contentState = ContentState.createFromBlockArray(draft.contentBlocks);
    const editorState = EditorState.createWithContent(contentState);
    return editorState;
  };

  const [editorState, setEditorState] = useState(
    value ? prepareDraft(value) : EditorState.createEmpty()
  );

  const onEditorStateChange = (editorState) => {
    const forFormik = draftToHtml(
      convertToRaw(editorState.getCurrentContent())
    );
    setValue(forFormik);
    setEditorState(editorState);
  };

  return (
    <div>
      <Editor
        editorState={editorState}
        wrapperClassName="demo-wrapper"
        editorClassName="demo-editor"
        onEditorStateChange={onEditorStateChange}
        {...props}
        {...field}
      />
    </div>
  );
};

export default RichTextEditor;

and AddPost.js

import React from "react";
import { Row, Col, Card, Form, Input } from "antd";
import { useFormik, Field } from "formik";
import RichTextEditor from "../RichTextEditor/RichTextEditor";

const initialValues = {
  title: "",
  body: "",
};
export default function AddContent() {
  const formik = useFormik({
    initialValues,
    onSubmit: (values) => {
      alert(JSON.stringify(values, null, 2));
    },
  });

  return (
    <Row>
      <Col span={19}>
        <Card>
          <>
            <h1>
              {formik.values.title ? formik.values.title : "Content Title"}
            </h1>

            <Form onSubmit={formik.handleSubmit}>
              <Input
                id="title"
                name="title"
                placeholder="Content Title"
                onChange={formik.handleChange}
                value={formik.values.email}
              />

              <Field
                name="body"
                component={RichTextEditor}
                value={formik.values.body}
                onChange={formik.handleChange}
                // {...formik.getFieldProps("body")}
              />
            </Form>
          </>
        </Card>
      </Col>
      <Col span={5}></Col>
    </Row>
  );
}

But I am getting following error

TypeError: formik.getFieldProps is not a function
Field
src/Field.tsx:181

  178 |     unregisterField(name);
  179 |   };
  180 | }, [registerField, unregisterField, name, validate]);
> 181 | const field = formik.getFieldProps({ name, ...props });
      | ^  182 | const meta = formik.getFieldMeta(name);
  183 | const legacyBag = { field, form: formik };
  184 | 

Answer 1

I had the same problem and fixed it with the following fix.
In short, wrap inside the render with a FormikProvider.

AddPost.js

// add FormikProvider
import { useFormik, Field, FormikProvider } from "formik";

const formik = useFormik({
  initialValues,
  onSubmit: (values) => {...},
});

// wrap with FormikProvider
return (
  <FormikProvider value={formik}>
    <Row>...your-code...</Row>
  </FormikProvider>
)

Answer 2

this error is raised because you are using getFieldProps() function on Field component provided by formik and not on normal component like Input which is the two is working differently.

you should use it like that.

<Form onSubmit={formik.handleSubmit}>
    <Input
       id="title"
       placeholder="Content Title"
       {...formik.getFieldProps("title")}
     />

    <Input
       component={RichTextEditor}
       {...formik.getFieldProps("body")}
    />
</Form>

for more information about getFieldProps();

https://formik.org/docs/tutorial#getfieldprops