DEV Community

sandeep akinapelli
sandeep akinapelli

Posted on

Error in react forms

#react #redux

I am getting the following error with react. Any help would be appreciated. I am using react 16.8.6

VM238 main.chunk.js:4699 Uncaught TypeError: Converting circular structure to JSON
--> starting at object with constructor 'HTMLTextAreaElement'
| property 'reactInternalInstance$l6xknphujjo' -> object with constructor 'FiberNode'
--- property 'stateNode' closes the circle
at Object.stringify ()
at QuestionForm.onSubmit (VM238 main.chunk.js:4699)
at onSubmit (VM238 main.chunk.js:4798)
at HTMLUnknownElement.callCallback (VM236 0.chunk.js:63220)
at Object.invokeGuardedCallbackDev (VM236 0.chunk.js:63269)
at invokeGuardedCallback (VM236 0.chunk.js:63323)
at invokeGuardedCallbackAndCatchFirstError (VM236 0.chunk.js:63338)
at executeDispatch (VM236 0.chunk.js:63644)
at executeDispatchesInOrder (VM236 0.chunk.js:63669)
at executeDispatchesAndRelease (VM236 0.chunk.js:63768)
at executeDispatchesAndReleaseTopLevel (VM236 0.chunk.js:63777)
at forEachAccumulated (VM236 0.chunk.js:63749)
at runEventsInBatch (VM236 0.chunk.js:63917)
at runExtractedEventsInBatch (VM236 0.chunk.js:63925)
at handleTopLevel (VM236 0.chunk.js:68102)
at batchedUpdates$1 (VM236 0.chunk.js:84536)
at batchedUpdates (VM236 0.chunk.js:65320)
at dispatchEvent (VM236 0.chunk.js:68182)
at VM236 0.chunk.js:84593
at Object.unstable_runWithPriority (VM236 0.chunk.js:109912)
at interactiveUpdates$1 (VM236 0.chunk.js:84592)
at interactiveUpdates (VM236 0.chunk.js:65341)
at dispatchInteractiveEvent (VM236 0.chunk.js:68158)
onSubmit @ VM238 main.chunk.js:4699
onSubmit @ VM238 main.chunk.js:4798
callCallback @ VM236 0.chunk.js:63220
invokeGuardedCallbackDev @ VM236 0.chunk.js:63269
invokeGuardedCallback @ VM236 0.chunk.js:63323
invokeGuardedCallbackAndCatchFirstError @ VM236 0.chunk.js:63338
executeDispatch @ VM236 0.chunk.js:63644
executeDispatchesInOrder @ VM236 0.chunk.js:63669
executeDispatchesAndRelease @ VM236 0.chunk.js:63768
executeDispatchesAndReleaseTopLevel @ VM236 0.chunk.js:63777
forEachAccumulated @ VM236 0.chunk.js:63749
runEventsInBatch @ VM236 0.chunk.js:63917
runExtractedEventsInBatch @ VM236 0.chunk.js:63925
handleTopLevel @ VM236 0.chunk.js:68102
batchedUpdates$1 @ VM236 0.chunk.js:84536
batchedUpdates @ VM236 0.chunk.js:65320
dispatchEvent @ VM236 0.chunk.js:68182
(anonymous) @ VM236 0.chunk.js:84593
unstable_runWithPriority @ VM236 0.chunk.js:109912
interactiveUpdates$1 @ VM236 0.chunk.js:84592
interactiveUpdates @ VM236 0.chunk.js:65341
dispatchInteractiveEvent @ VM236 0.chunk.js:68158
VM236 0.chunk.js:63360 Uncaught TypeError: Converting circular structure to JSON
--> starting at object with constructor 'HTMLTextAreaElement'
| property 'reactInternalInstance$l6xknphujjo' -> object with constructor 'FiberNode'
--- property 'stateNode' closes the circle
at Object.stringify ()
at QuestionForm.onSubmit (VM238 main.chunk.js:4699)
at onSubmit (VM238 main.chunk.js:4798)
at HTMLUnknownElement.callCallback (VM236 0.chunk.js:63220)
at Object.invokeGuardedCallbackDev (VM236 0.chunk.js:63269)
at invokeGuardedCallback (VM236 0.chunk.js:63323)
at invokeGuardedCallbackAndCatchFirstError (VM236 0.chunk.js:63338)
at executeDispatch (VM236 0.chunk.js:63644)
at executeDispatchesInOrder (VM236 0.chunk.js:63669)
at executeDispatchesAndRelease (VM236 0.chunk.js:63768)
at executeDispatchesAndReleaseTopLevel (VM236 0.chunk.js:63777)
at forEachAccumulated (VM236 0.chunk.js:63749)
at runEventsInBatch (VM236 0.chunk.js:63917)
at runExtractedEventsInBatch (VM236 0.chunk.js:63925)
at handleTopLevel (VM236 0.chunk.js:68102)
at batchedUpdates$1 (VM236 0.chunk.js:84536)
at batchedUpdates (VM236 0.chunk.js:65320)
at dispatchEvent (VM236 0.chunk.js:68182)
at VM236 0.chunk.js:84593
at Object.unstable_runWithPriority (VM236 0.chunk.js:109912)
at interactiveUpdates$1 (VM236 0.chunk.js:84592)
at interactiveUpdates (VM236 0.chunk.js:65341)
at dispatchInteractiveEvent (VM236 0.chunk.js:68158)
onSubmit @ VM238 main.chunk.js:4699
onSubmit @ VM238 main.chunk.js:4798
callCallback @ VM236 0.chunk.js:63220
invokeGuardedCallbackDev @ VM236 0.chunk.js:63269
invokeGuardedCallback @ VM236 0.chunk.js:63323
invokeGuardedCallbackAndCatchFirstError @ VM236 0.chunk.js:63338
executeDispatch @ VM236 0.chunk.js:63644
executeDispatchesInOrder @ VM236 0.chunk.js:63669
executeDispatchesAndRelease @ VM236 0.chunk.js:63768
executeDispatchesAndReleaseTopLevel @ VM236 0.chunk.js:63777
forEachAccumulated @ VM236 0.chunk.js:63749
runEventsInBatch @ VM236 0.chunk.js:63917
runExtractedEventsInBatch @ VM236 0.chunk.js:63925
handleTopLevel @ VM236 0.chunk.js:68102
batchedUpdates$1 @ VM236 0.chunk.js:84536
batchedUpdates @ VM236 0.chunk.js:65320
dispatchEvent @ VM236 0.chunk.js:68182
(anonymous) @ VM236 0.chunk.js:84593
unstable_runWithPriority @ VM236 0.chunk.js:109912
interactiveUpdates$1 @ VM236 0.chunk.js:84592
interactiveUpdates @ VM236 0.chunk.js:65341
dispatchInteractiveEvent @ VM236 0.chunk.js:68158
Navigated to http://localhost:3000/initiatives/rs/5d4b477326610bf84b8d7a44?desc=&desc=
index.js:1375 Warning: Please use require("history").createBrowserHistory instead of require("history/createBrowserHistory"). Support for the latter will be removed in the next major release.
console. @ index.js:1375
printWarning @ warnAboutDeprecatedCJSRequire.js:13
push../node_modules/history/warnAboutDeprecatedCJSRequire.js.module.exports @ warnAboutDeprecatedCJSRequire.js:26
./node_modules/history/createBrowserHistory.js @ createBrowserHistory.js:3
webpack_require @ bootstrap:781
fn @ bootstrap:149
./node_modules/react-router-dom/es/BrowserRouter.js @ BrowserRouter.js:1
webpack_require @ bootstrap:781
fn @ bootstrap:149
./node_modules/react-router-dom/es/index.js @ index.js:1
webpack_require @ bootstrap:781
fn @ bootstrap:149
./src/components/MenuComponent.js @ MainComponent.js:119
webpack_require @ bootstrap:781
fn @ bootstrap:149
./src/components/MainComponent.js @ LoginComponent.js:96
webpack_require @ bootstrap:781
fn @ bootstrap:149
./src/App.js @ App.css?4433:45
webpack_require @ bootstrap:781
fn @ bootstrap:149
./src/index.js @ index.css?f3f6:45
webpack_require @ bootstrap:781
fn @ bootstrap:149
0 @ promotions.js:2
webpack_require @ bootstrap:781
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1375 Warning: Please use require("history").createHashHistory instead of require("history/createHashHistory"). Support for the latter will be removed in the next major release.
console. @ index.js:1375
printWarning @ warnAboutDeprecatedCJSRequire.js:13
push../node_modules/history/warnAboutDeprecatedCJSRequire.js.module.exports @ warnAboutDeprecatedCJSRequire.js:26
./node_modules/history/createHashHistory.js @ createHashHistory.js:3
webpack_require @ bootstrap:781
fn @ bootstrap:149
./node_modules/react-router-dom/es/HashRouter.js @ HashRouter.js:1
webpack_require @ bootstrap:781
fn @ bootstrap:149
./node_modules/react-router-dom/es/index.js @ index.js:1
webpack_require @ bootstrap:781
fn @ bootstrap:149
./src/components/MenuComponent.js @ MainComponent.js:119
webpack_require @ bootstrap:781
fn @ bootstrap:149
./src/components/MainComponent.js @ LoginComponent.js:96
webpack_require @ bootstrap:781
fn @ bootstrap:149
./src/App.js @ App.css?4433:45
webpack_require @ bootstrap:781
fn @ bootstrap:149
./src/index.js @ index.css?f3f6:45
webpack_require @ bootstrap:781
fn @ bootstrap:149
0 @ promotions.js:2
webpack_require @ bootstrap:781
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
redux-logger.js:377 action RS_LOADING @ 21:26:25.629
redux-logger.js:388 prev state {dishes: {…}, initiatives: {…}, reqSections: {…}, comments: Array(20), promotions: Array(1), …}
redux-logger.js:392 action {type: "RS_LOADING"}
redux-logger.js:401 next state {dishes: {…}, initiatives: {…}, reqSections: {…}, comments: Array(20), promotions: Array(1), …}
reqSections.js:41 received the following: [object Object],[object Object]

Top comments (3)

Collapse
 
arung86 profile image
Arun Kumar G •

Can you be able to share sample code
may be in a codesandbox or codepen, so that others can look at the code and try to see if they can fix this bug
Have you posted in stackoverflow.com already?

Collapse
 
sandeep_ap profile image
sandeep akinapelli •

import React, { Component } from 'react';
import {
Card, CardTitle, CardBody, CardHeader, CardFooter, Collapse,
Dropdown, DropdownItem, DropdownMenu, DropdownToggle, InputGroup,
Form, Input, Button, Row, Col, Label, ButtonGroup
} from 'reactstrap';
import { connect } from 'react-redux';
// import { Control, Form, Errors, actions } from 'react-redux-form';
import { withRouter } from "react-router-dom";

class QuestionHeaderModalForm extends Component {
constructor(props) {
super(props);
this.onSubmit = this.onSubmit.bind(this);
this.onCancel = this.onCancel.bind(this);
this.state = {
rsDropDownOpen:false,
item: {
name:"",
description:"",
isvendor:false,
isinternal:false,
isreference:false
}
};
this.toggleRSDropDown = this.toggleRSDropDown.bind(this)
}

toggleRSDropDown() {
this.setState({rsDropDownOpen: !this.state.rsDropDownOpen})
}

onSubmit(values) {
console.log('values in onsubmit are:' + JSON.stringify(values.desc));
// this.props.onSubmitInitiative(values)
}

onDelete(values) {
// this.props.onDelete(values)
}

onCancel() {
// this.props.history.push('/initiatives');
console.log('oncancel called')
}

render() {
let deleteButton;
if (this.props.initiative) {
deleteButton =


} else {
deleteButton =
}

const existingRSItems = this.props.reqSections.reqSections.map(function (rsItem, index) {
return (
{rsItem.name}
);
});

return (


Question header:


this.onSubmit(values)}>




Select Reqruirement Section


Existing
{existingRSItems}

+Create new






Name
// defaultValue={this.props.item.description}
/>


Description




{' '}



{' '} Internal




{' '} Vendor




{' '} Reference










);
}
}

export default withRouter(connect()(QuestionHeaderModalForm));

Collapse
 
sandeep_ap profile image
sandeep akinapelli •

import React, { Component } from 'react';
import {
Card, CardTitle, CardBody, CardHeader, CardFooter, Collapse,
Dropdown, DropdownItem, DropdownMenu, DropdownToggle, InputGroup,
Form, Input, Button, Row, Col, Label, ButtonGroup
} from 'reactstrap';
import { connect } from 'react-redux';
// import { Control, Form, Errors, actions } from 'react-redux-form';
import { withRouter } from "react-router-dom";

class QuestionHeaderModalForm extends Component {
constructor(props) {
super(props);
this.onSubmit = this.onSubmit.bind(this);
this.onCancel = this.onCancel.bind(this);
this.state = {
rsDropDownOpen:false,
item: {
name:"",
description:"",
isvendor:false,
isinternal:false,
isreference:false
}
};
this.toggleRSDropDown = this.toggleRSDropDown.bind(this)
}

toggleRSDropDown() {
this.setState({rsDropDownOpen: !this.state.rsDropDownOpen})
}

onSubmit(values) {
console.log('values in onsubmit are:' + JSON.stringify(values.desc));
// this.props.onSubmitInitiative(values)
}

onDelete(values) {
// this.props.onDelete(values)
}

onCancel() {
// this.props.history.push('/initiatives');
console.log('oncancel called')
}

render() {
let deleteButton;
if (this.props.initiative) {
deleteButton =


} else {
deleteButton =
}

const existingRSItems = this.props.reqSections.reqSections.map(function (rsItem, index) {
return (
{rsItem.name}
);
});

return (


Question header:


this.onSubmit(values)}>




Select Reqruirement Section


Existing
{existingRSItems}

+Create new






Name
// defaultValue={this.props.item.description}
/>


Description




{' '}



{' '} Internal




{' '} Vendor




{' '} Reference










);
}
}

export default withRouter(connect()(QuestionHeaderModalForm));

Read next

salimzade profile image

Handle Media Query in React with hooks

Teymur Salimzade -

phuocng profile image

Lazy load an image

Phuoc Nguyen -

prathamdupare profile image

Server components and Client Components in Next.js - Part 2

Pratham Dupare -

ashray_sam profile image

Portfolio Website / Bible App - Devlog #6

K. Sam Ashray -