How to fix TypeError: Converting circular structur

问题:

My simple reactjs app I am calling a Dynamic form which contains three fields i.e. name, email and message fields. name and email are text fields but the message is a textarea field type. This model is defined in the App.js file component. The Dynamic component code checks the type of the field and renders it accordingly, this code is in the render section of the DynamicForm component below. I am getting the following error when I submit the form with sample data.

TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'HTMLInputElement'
    |     property '__reactInternalInstance$8fzaqcbcjir' -> object with constructor 'FiberNode'
    --- property 'stateNode' closes the circle error  

If I remove this check and display a text field using the input element, this error goes away. I am fairly new to reactjs programming and it is a bit confusing how to remove the introduced circular structure type error.

The following code shows my App.js file contents

import React from 'react';
import './contact.css';

export default class DynamicForm extends React.Component {
    state = {
    }
    constructor(props) {
        super(props);
    }

    onSubmit = (e) => {
        e.preventDefault();
        if (this.props.onSubmit) this.props.onSubmit(this.state);
    }

    onChange = (e, key) => {
        this.setState({
            [key]: this[key]
        })

    }

    renderForm = () => {
        let model = this.props.model;
        let formUI = model.map((m) => {
            let key = m.key;
            let type = m.type || "text";
            let props = m.props || {};
            return (
                <div key={key} className="form-group">
                    <label className="formlabel"
                        key={"l" + m.key}
                        htmlFor={m.key}>
                        {m.label}
                    </label>
                    {type === "textarea" ? 
                      (<textarea {...props}
                      ref={(key) => {this[m.key] = key }}
                      className="form-input"
                      type={type}
                      key={"i" +m.key}
                      onChange={(e) => { this.onChange(e, key) }
                    }/>)
                    :
                      (<input {...props}
                        ref={(key) => { this[m.key] = key }}
                        className="form-input"
                        type={type}
                        key={"i" + m.key}
                        onChange={(e) => { this.onChange(e, key) }}
                      ></input>)}

                </div>
            )
        });
        return formUI;
    }

    render() {
        let title = this.props.title || "Dynamic Contact Us Form";
        return (
            <div className={this.props.className}>
                <h3>{title}</h3>
                <form className="dynamic-form" onSubmit={(e) => this.onSubmit(e)}>
                    <div className="form-group">
                        {this.renderForm()}
                        <button type="submit">Submit</button>
                    </div>


                </form>
            </div>
        )
    }
}

The following is the definition of App.js file:

import React, { Component } from 'react';
import './App.css';
import DynamicForm from './components/contact-us-form/DynamicForm'


class App extends Component {
  state = {
    data: [
      { id: 1, name: "a", email: "[e-mail]", message: "This is my message to you" },
      { id: 1, name: "b", email: "[e-mail]", message: "This is my message to you" },
      { id: 1, name: "c", email: "[e-mail]", message: "This is my message to you" }
    ]
  }

  onSubmit = (model) => {
    model.id = +new Date();
    this.setState({
      data: [model, ...this.state.data]
    })

  }


  render() {
    return (
      <div className="App">
        <h1>Cipherise Cloud</h1>
        <DynamicForm className="contactform"
          title="Contact us"
          model={[

            { key: "name", label: "Name", props: { required: true } },
            { key: "email", label: "E-mail", type: "email" },
            { key: "message", label: "Message", type: "textarea" }

          ]}
          onSubmit={(model) => { this.onSubmit(model) }}

        />

        <pre style={{ width: "300px" }}>

          {JSON.stringify(this.state.data)}

        </pre>
      </div>
    );
  }
}

export default App;

Can anyone help me to sort out this issue as I expect the output as a JSON object as shown below

[{"id":1,
"name":"James Bond",
"email":"[e-mail]",
"message":"My Shoutout for help to resolve circular type error issue"}]