question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

e.persist is not a function

See original GitHub issue

I use ant-design ui library, and i got this error when i use RadioGroup and Radio

Uncaught TypeError: e.persist is not a function
    at Formik._this.handleChange (formik.es6.js:1110)
    at onChange (UserType.jsx:75)
    at Object.RadioGroup._this.onRadioChange [as onChange] (group.js:80)
    at handleChange (Checkbox.js:166)
    at Object.executeOnChange (LinkedValueUtils.js:132)
    at ReactDOMComponent._handleChange (ReactDOMInput.js:241)
    at Object.ReactErrorUtils.invokeGuardedCallback (ReactErrorUtils.js:69)
    at executeDispatch (EventPluginUtils.js:85)
    at Object.executeDispatchesInOrder (EventPluginUtils.js:108)
    at executeDispatchesAndRelease (EventPluginHub.js:43)
    at executeDispatchesAndReleaseTopLevel (EventPluginHub.js:54)
    at Array.forEach (<anonymous>)
    at forEachAccumulated (forEachAccumulated.js:24)
    at Object.processEventQueue (EventPluginHub.js:254)
    at runEventQueueInBatch (ReactEventEmitterMixin.js:17)
    at Object.handleTopLevel [as _handleTopLevel] (ReactEventEmitterMixin.js:27)
    at handleTopLevelImpl (ReactEventListener.js:72)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:143)
    at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)
    at Object.batchedUpdates (ReactUpdates.js:97)
    at dispatchEvent (ReactEventListener.js:147)

formik code:

_this.handleChange = function (e) {
            if (isReactNative) {
                if (process.env.NODE_ENV !== 'production') {
                    console.error("Warning: Formik's handleChange does not work with React Native. Use setFieldValue and within a callback instead. For more info see https://github.com/jaredpalmer/formikhttps://github.com/jaredpalmer/formik#react-native");
                }
                return;
            }
            e.persist(); // <---- THIS
            var _a = e.target, type = _a.type, name = _a.name, id = _a.id, value = _a.value, checked = _a.checked, outerHTML = _a.outerHTML;
            var field = name ? name : id;
            var val = /number|range/.test(type)
                ? parseFloat(value)
                : /checkbox/.test(type) ? checked : value;
            if (!field && process.env.NODE_ENV !== 'production') {
                console.error("Warning: You forgot to pass an `id` or `name` attribute to your input:\n\n  " + outerHTML + "\n\nFormik cannot determine which value to update. For more info see https://github.com/jaredpalmer/formik#handlechange-e-reactchangeeventany--void\n");
            }
            _this.setState(function (prevState) {
                return (__assign({}, prevState, { values: __assign({}, prevState.values, (_a = {}, _a[field] = val, _a)) }));
                var _a;
            });
            if (_this.props.validateOnChange) {
                _this.runValidations(__assign({}, _this.state.values, (_b = {}, _b[field] = value, _b)));
            }
            var _b;
        };

example:

const UserTypeForm = ({
    values,
    touched,
    errors,
    dirty,
    handleChange,
    handleBlur,
    handleSubmit,
    handleReset,
    isSubmiting,
    ...props
}) => (
    <Form className={props.className} onSubmit={handleSubmit}>
        <Form.Item
            label="Type"
            required
            validateStatus={touched.type && errors.type ? "error" : ""}
            help={touched.type && errors.type}
        >
            <RadioGroup
                name="type"
                value={values.type}
                onChange={handleChange}  // <--- Here error
            >
                <RadioGroup.Radio value={1}>One</RadioGroup.Radio>
                <RadioGroup.Radio value={2}>Two</RadioGroup.Radio>
                <RadioGroup.Radio value={3}>Three</RadioGroup.Radio>
            </RadioGroup>
        </Form.Item>
        <Form.Item className="next-button">
            <SuccessButton htmlType="submit">
                Save and next
            </SuccessButton>
        </Form.Item>
    </Form>
)

Now i resolve this error by:

onChange={(e) => {
     e.persist = () => {}
     handleChange(e)
}}

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:6
  • Comments:8 (4 by maintainers)

github_iconTop GitHub Comments

10reactions
jaredpalmercommented, Oct 1, 2017

You will need to wrap the input in its own component treat it like a custom input. Use setFieldValue(this.props.name, value) and you should be good

8reactions
jaredpalmercommented, Oct 18, 2017

Just like React Native and many third party input components, you may not have access to the synthetic DOM event e. Thus, e.target.name and e.persist() are not available. In these situations, you should use setFieldValue and setFieldTouched.

React Native Formik Docs: https://github.com/jaredpalmer/formik#react-native Working with 3rd Party Inputs example: https://codesandbox.io/s/jRzE53pqR

Read more comments on GitHub >

github_iconTop Results From Across the Web

TypeError: e.persist is not a function in Typeahead Bootstrap ...
I am getting the error TypeError: e.persist is not a function when attempting to try different methods to test my application in Enzyme...
Read more >
Error "Uncaught TypeError: e.persist is not a function"
Option 1. Copy and paste the text into the Parameter dialog instead of using the normal input method (IME).
Read more >
event.persist() should be called when using React synthetic ...
This rule applies when a React synthetic event is used inside an asynchronous callback function without calling event.persist() .
Read more >
SyntheticEvent - React
persist () doesn't do anything because the SyntheticEvent is no longer pooled. Note: As of v0.14, returning false from an event handler will...
Read more >
Persist the State of the Grid alongside the Function Handlers
By default JSON.stringify() cannot serialize function definitions. Event handlers and other similar Grid configurations are lost when the state is persisted ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found