react-hook-form: issue: append issue with data is not iterable

Version Number

7.11.0

Codesandbox/Expo snack

https://codesandbox.io/s/silly-joana-u51tu?file=/src/ContributionInput.js

Steps to reproduce

I actually have no idea how to reproduce, the Code Sandbox works as expected, however, when I try adding a field in my project I get an error when I run append that says “data is not iterable”.

Expected behaviour

It’s actually behaving as expected in the code sandbox, just getting an error in my actual project. Hoping someone would have some ideas

What browsers are you seeing the problem on?

Chrome

Relevant log output

Uncaught TypeError: data is not iterable
    at append (index.esm.js?34a0:373)
    at batchStateUpdate (index.esm.js?34a0:484)
    at append$1 (index.esm.js?34a0:529)
    at onClick (contribution-input.js?a4f3:35)
    at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:3994)
    at invokeGuardedCallback (react-dom.development.js?61bb:4056)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js?61bb:4070)
    at executeDispatch (react-dom.development.js?61bb:8243)
    at processDispatchQueueItemsInOrder (react-dom.development.js?61bb:8275)
    at processDispatchQueue (react-dom.development.js?61bb:8288)
    at dispatchEventsForPlugins (react-dom.development.js?61bb:8299)
    at eval (react-dom.development.js?61bb:8508)
    at batchedEventUpdates$1 (react-dom.development.js?61bb:22396)
    at batchedEventUpdates (react-dom.development.js?61bb:3745)
    at dispatchEventForPluginEventSystem (react-dom.development.js?61bb:8507)
    at attemptToDispatchEvent (react-dom.development.js?61bb:6005)
    at dispatchEvent (react-dom.development.js?61bb:5924)
    at unstable_runWithPriority (scheduler.development.js?3069:468)
    at runWithPriority$1 (react-dom.development.js?61bb:11276)
    at discreteUpdates$1 (react-dom.development.js?61bb:22413)
    at discreteUpdates (react-dom.development.js?61bb:3756)
    at dispatchDiscreteEvent (react-dom.development.js?61bb:5889)

Code of Conduct

I agree to follow this project’s Code of Conduct

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 34 (16 by maintainers)

Most upvoted comments

@bluebill1049 actually my error was there because I spelled something wrong 😄

I am so happy to get through this! This page itself is a little more complicated than basic forms, I need to add back file uploading (I already have this down) and add another dynamic form input. I think it’s okay for me to close this, but I’ma leave it open until I’m done with this page, just in case.

Thank you so much for your help! This project has been amazing, when I launch this platform for https://blacktechpipeline.com in March, I plan on sponsoring this project!

dayhaysoos on Jan 12, 2022

hmm okay I’ll consider this, right now I like that I have it working with a third party library right now. If this doesn’t work out the way I hope, I’d go back to useFieldArray, but I might need help with that, though. Will report back! thank you!

dayhaysoos on Jan 14, 2022

okay!

I do have some really weird/complex things going on with my <FormBuilder />… I think I’m going to get rid of the logic I’m using to automatically build forms and make them individual components. It’s going to be a lot of work but perhaps somehow, somewhere , the issue will be addressed. Will report back.

I agree, doesn’t feel right to swallow the error, especially considering that all code sandbox instances work as expected.

dayhaysoos on Jan 11, 2022

I’ll try tomorrow, thanks, Bill!

dayhaysoos on Jan 11, 2022

Okay, thank you! I wish getting this working was as easy as removing the variable, but I think I might have to install React Router or something, this might take me some time but I really appreciate your help.

Will keep you updated on how it goes

dayhaysoos on Jan 11, 2022

const Test = () => {
  const From = () => <form /> // don't do this
  
  return <Whatver />
}

const From = () => <form /> // do this

const Test = () => {
  return <Whatver />
}

bluebill1049 on Jan 10, 2022

Omg @bluebill1049 it works after upgrading to latest! I hate myself for not checking this on my own holy shit!!

Thank you so much

dayhaysoos on Jan 10, 2022