TypeError: cyclic object value in React

Question

This is my code:

sendMail(e) {
    e.preventDefault();
    // fetch('/https://uczsieapp-mailer.herokuapp.com/', {
    var name = document.getElementById('name');
    var contactReason = document.getElementById('contactReason');
    var email = document.getElementById('email');
    var additionalInfo = document.getElementById('additionalInfo');
    var body = JSON.stringify({
            name: name,
            contactReason: contactReason,
            email: email,
            additionalInfo: additionalInfo,
        }
    );
    console.log(body);
    fetch('http://localhost:4000/', {
        method: 'POST',
        body: JSON.stringify({
                name: name,
                contactReason: contactReason,
                email: email,
                additionalInfo: additionalInfo,
            }
        )
    });
}

The code references this HTML:

<form>
    <input className="form_input input_margin" type="text" id='name' name="name"
           placeholder="Imię"/>
    <input className="form_input_2" type="text" name="email" id='email'
           placeholder="Adres e-mail"/>
    <textarea name='additionalInfo' id='additionalInfo' className="form_textarea"
              type="text" placeholder="Dodatkowe informacje"/>
    <button onClick={this.sendMail} className="btn button_send">Wyślij</button>
</form>

So what I understand it's referencing something, that's being changed, but how does anyone know where exactly this error is and why?

I get this error on the JSON.stringify() method. Creating an object without stringify() works.

Answer 1

The problem comes with the fact that you are directly trying to stringify DOM elements ( which probably contain circular references).

What you should do, is probably something like that:

 var body = JSON.stringify({
        name: name.value,
        contactReason: contactReason.value,
        email: email.value,
        additionalInfo: additionalInfo.value,
    }
 );

If you want to post the values of the fields.

Answer 2

I received a similar error using React. For some reason I had two instances of the "React Context DevTool". I also reset the other react devtools in my addins by disabling, then re-enabling them. The error went away. - E