This is my code:

sendMail(e) {
    e.preventDefault();
    // fetch('//', {
    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.

This is my code:

sendMail(e) {
    e.preventDefault();
    // fetch('/https://uczsieapp-mailer.herokuapp./', {
    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.

• javascript
• reactjs

• developer.mozilla/en-US/docs/Web/JavaScript/Reference/… – A G Commented Jun 21, 2018 at 9:54
• Yes, I read it. I still don't understand why that's throwing an error – Alex Ironside Commented Jun 21, 2018 at 9:56
• The same article has a code snippet to check and filter cyclic reference. You should use that figure out which property is throwing this error. – A G Commented Jun 21, 2018 at 9:58
• 1 What do you want to do in your code? Why are you stringifying directly dom object? Shouldn't you get the innerHTML of those instead ? – Axnyff Commented Jun 21, 2018 at 10:00
• 1 @Axnyff You were right. I pletely missed that. Would you like to add an answer? – Alex Ironside Commented Jun 21, 2018 at 11:12

2 Answers 2

The problem es 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.

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