Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

Hi! I get above error from my ContactForm.js component. This error is because the response body of fetch is not in JSON format. How to convert it into JSON format?

import React, {useState} from "react";
import Minimal7 from '../img/minimal7.jpg';
import Minimal6 from '../img/minimal6.jpg';
import Minimal5 from '../img/minimal5.jpg';
import {FaFacebookSquare, FaInstagramSquare, FaPinterestSquare } from "react-icons/fa";

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),
}).then(res => res.json())
.then(res => console.log(res));
setStatus("Submit");
let result = await response.json();
console.log(result);
alert(result.status);
};
return (

I'd love to hear from you! I aim to answer all emails whithin my normal business hours of M-F, 9-4pm.

Use the form below or email me at [e-mail]

• Delightartco

CONTACT

{status}


);
}

export default ContactForm;

export function Design() {

return (

Have questions? Check our:

Design services

Process

Pricing

);

}

Comments

[Thomas Werner]

That error message basically means that the backend's response data is not a valid JSON response. It might be plain text or HTML, and could be something like a server side error message. In order to troubleshoot you need to open the network tab of your browser's developer console and look at the response payload of that failing request when you try to place that request.

I just placed a POST request on that "send" URL using curl as follows:

curl -X POST https://delightart.co/send

The response from the server is an HTML document. So either your backend is not doing the right thing, or your frontend is not using the correct "send" URL

[radgoll]

This is the structure of my folders. How to set up endpoint. In this case endpoint is a problem.

dev-to-uploads.s3.amazonaws.com/up...