React.js App SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

Question

After deploy react.js application on server I am getting error in contact form as in title. On localhost the form worked without any errors. The problem occurs just after clicking the sumbit button on the form. Then you can see the error in the console. Do any of you see any error in the code below? Where can I look for a solution to this error?

Live version of the contact page

Contact page

ContactForm.js

const ContactForm = () => {
  const [status, setStatus] = useState("Submit");
  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus("Sending...");
    const { name, email, subject, business, datetime, launch, message } = e.target.elements;
    let details = {
      name: name.value,
      email: email.value,
      subject: subject.value,
      business: business.value,
      datetime: datetime.value,
      launch: launch.value,
      message: message.value,
    };
    let response = await fetch("https://delightart.co/send", {
      method: "POST",
      headers: {
        "Content-Type": "application/json;charset=utf-8",
      },
      body: JSON.stringify(details),
    });
    setStatus("Submit");
    let result = await response.json();
    alert(result.status);
  };

Wei Su · Accepted Answer · 2021-06-14 15:17:26Z

3

That's because the response body of fetch is not in JSON format, so when you use response.json(), it threw the error. So you need make sure whether response is a JSON, either you can use it without calling response.json() or use JSON.stringify() in the backend service to turn the data into JSON format before sending it.

You can check Response apis in MDN https://developer.mozilla.org/en-US/docs/Web/API/Response.

And response.json() inherits from body.json(), so you can check it for more details. https://developer.mozilla.org/en-US/docs/Web/API/Body/json

answered Jun 14, 2021 at 15:17

Wei Su

6564 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React.js App SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related