Issue posting data to api in react js

Question

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=dsffdsf%40gmail.com&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;

@Dave I tried to add value to input then fetch in there but its not working — Techno Hub
– Techno Hub, Commented Sep 17, 2022 at 3:29

jturner · Accepted Answer · 2022-09-17 03:53:12Z

1

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 />

edited Sep 17, 2022 at 3:53

answered Sep 17, 2022 at 3:50

jturner

112 bronze badges

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

2 Comments

Techno Hub Over a year ago

hey I added your changes and it worked but there is a problem as soon as I click on submit button it send post data to api like this localhost:3000/…. but it should not be like this it should be like this edu.orgiance.com/api/…

Techno Hub Over a year ago

please read the above comment

alex · Accepted Answer · 2022-09-17 03:55:03Z

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)
    })
}

Collectives™ on Stack Overflow

Issue posting data to api in react js

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related