Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
Tags: javascript, react
Published: 2021-06-14 21:33:16

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 (
      <div className="form-container">
        <div className="about-image contact-form">
            <img src={Minimal5} alt="Minimal5" />
              <p className="about-more">I'd love to hear from you! I aim to answer all emails whithin my normal business hours of M-F, 9-4pm.</p>
              <p className="about-more">Use the form below or email me at office@delightart.co</p>
              <ul>
                <li><a href="https://facebook.com/delightartco"><FaFacebookSquare color="#9D7C5E"/></a></li>
                <li><a href="https://instagram.com/delightartco"><FaInstagramSquare color="#9D7C5E"/></a></li>
                <li><a href="https://pinterest.com/delightartco30"><FaPinterestSquare color="#9D7C5E"/></a></li>
                <li><span className="signature">Delightartco</span></li>
              </ul>
        </div>
        <form className="contact-form" onSubmit={handleSubmit}>
          <h2>CONTACT</h2>
          <input type="text" id="name" placeholder="Full name" required/><br/>
          <input type="email" id="email" placeholder="Email" required/><br/>
          <input type="text" id="subject" placeholder="Subject" required/><br/>
          <input type="text" id="business" placeholder="What does your business do?" /><br/>
          <input type="time-local" id="datetime" placeholder="Your timezone" required /><br/>
          <input type="text" id="launch" placeholder="What is your ideal launch date?" required /><br/>
          <textarea id="message" placeholder="Tell me more about your project" cols="30" rows="10" required></textarea><br/>
          <button type="submit" className="submit" value="Send Message">{status}</button>
        </form>
        </div>
  );
}

export default ContactForm;



export function Design() {
      return (
        <div className="questions">
          <div className="questions-img">
            <img id="kuki" src={Minimal6} alt="Minimal5" />
            <img id="winnie" src={Minimal7} alt="Portfolio" />
          </div>
          <div className="questions-text">
            <h2 className="blacker-font">Have questions? Check our: </h2>
            <h3 className="service-font"><span className="services-styling">Design services</span></h3>
            <a href="/services"><h3 className="service-font service-circle">Process</h3></a>
            <a href="/services"><h3 className="service-font service-circle">Pricing</h3></a>
          </div>
    </div>
  );
}