Issue posting data to api in react js contact form

You're code has a few issues:

• jsonData never gets updated, because any update to a state or prop will rerender your function and therefore reinitialize jsonData
• Any value that is set on an input or textarea requires an onChange handler. Without it, you can't even type anything into the respective element. See https://reactjs.org/docs/forms.html#controlled-components for more information.

To make your code work, change jsonData into a state that get's initialized with the props data. To make an easier example, I will use contact as state and got rid of the array:

import React, { useState } from "react";

const ContactForm = (props) => {
  const { submitBtnClass, ...other } = props;
  const [contact, setContact] = useState({
    fname: "",
    email: "",
    mobile: "",
    message: "",
    ...other
  });

  function handleClick() {
    // Send data to the backend via POST
    fetch(
      "https://edu.orgiance.com/api/contactus?secret=f1794e34-ac40-46a0-9c81-d48a1322f4bb&fname=test&email=test@test.com&mobile=8463274946&message=",
      {
        // Enter your IP address here

        method: "POST",
        mode: "cors",
        body: JSON.stringify(contact) // body data type must match "Content-Type" header
      }
    );
  }

  function setContactData(e) {
    const name = e.currentTarget.name;
    const value = e.currentTarget.value;

    setContact((prev) => {
      return {
        ...prev,
        [name]: value
      };
    });
  }

  return (
    <form id="contact-form" action="#">
      <div className="row">
        <div className="col-md-6 mb-30">
          <input
            className="from-control"
            type="text"
            id="name"
            name="fname"
            placeholder="Name"
            value={contact.fname}
            onChange={setContactData}
            required
          />
        </div>

        <div className="col-md-6 mb-30">
          <input
            className="from-control"
            type="text"
            id="email"
            name="email"
            placeholder="E-Mail"
            value={contact.email}
            onChange={setContactData}
            required
          />
        </div>

        <div className="col-md-6 mb-30">
          <input
            className="from-control"
            type="text"
            id="phone"
            name="phone"
            placeholder="Phone Number"
            value={contact.phone}
            onChange={setContactData}
            required
          />
        </div>

        <div className="col-md-6 mb-30">
          <input
            className="from-control"
            type="text"
            id="website"
            name="website"
            placeholder="Your Website"
            value={contact.website}
            onChange={setContactData}
            required
          />
        </div>

        <div className="col-12 mb-30">
          <textarea
            className="from-control"
            id="message"
            name="message"
            placeholder="Your message Here"
            value={contact.message}
            onChange={setContactData}
          ></textarea>
        </div>
      </div>

      {JSON.stringify(contact)}

      <div className="btn-part">
        <button
          onClick={handleClick}
          className={
            submitBtnClass ? submitBtnClass : "readon learn-more submit"
          }
          type="submit"
        >
          Submit Now{" "}
        </button>
      </div>
    </form>
  );
};

const App = () => {
  return <ContactForm message={"test"} />;
};

export default App;