Issue posting data to api in react js-CodePudding

I am trying to send data to my contact form api through react but I am getting this problem

I tried to get input as a value to post through api when clicked on submit button but it is not working error = the api should call like this https://edu.orgiance.com/api/contactus?secret=xxxxx-ac40-46a0-9c81-d48a1322f4bb&fname=test&[email protected]&mobile=8463274946&message=test

but it is calling like this http://localhost:3000/?name=dfdfsd&[email protected]&phone=937285294&website=sxascsac&message=dscdscsfgcd#

My Code

import React from 'react';

const ContactForm = (props) => {
const { submitBtnClass } = props;



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 protected]&mobile=8463274946&message=', {  // Enter your IP address here

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

    })
    
  }


  var jsonData = {
    "contact": [
        {
            "fname": props.fname,
            "email": props.email,
            "mobile": props.phone,
            "message": props.message
        }
    ]
  }

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="name" placeholder="Name" value={props.fname}  required />
            </div>

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

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

            <div className="col-md-6 mb-30">
                <input className="from-control" type="text" id="website" name="website" placeholder="Your Website" required />
            </div>

            <div className="col-12 mb-30">
                <textarea className="from-control" id="message" name="message" placeholder="Your message Here" value={props.message}></textarea>
            </div>
        </div>
        <div className="btn-part" >
            <button onClick={handleClick} className={submitBtnClass ? submitBtnClass : 'readon learn-more submit'}   type="submit">Submit Now </button>
        </div>
    </form>
);

}

export default ContactForm;

CodePudding user response：

It looks like you are creating a functional stateless component. That means your data needs to be passed in the props object, and if you are trying to access it anywhere in the ContactForm component, you would need to use this format: props.variablename . ie:

<input className="from-control" type="text" id="name" name="name" placeholder="Name"  value={props.fname}required />

CodePudding user response：

All of those variables are undefined. You can't initialize that jsonData object with variables that don't exist, you also can't set <input value={undefinedVariable} ... />

Since you are using form, an easy thing to do is to change it to look something like:

<form onSubmit={this.handleClick}>
  ...
  <input type="submit" value="Submit" />
</form>

Then you can access the form data from the mouse event.

Example:

function handleClick(event) {
    event.preventDefault();
    const form = event.target;
    const jsonData = {
      "fname": form.name,
      "email": form.email,
      "mobile": form.phone,
      "message": form.message
    };
    fetch('https://edu.orgiance.com/api/contactus?secret=f1794exxxxxx',
      method: 'POST', 
      mode: 'cors', 
      body: JSON.stringify(jsonData)
    })
}