REACT fetch post request

Question

I have problem with routing post request I need to build register form and post input from form to mongodb I made router and post route on server side and it works ok (when I use postman)

//form is required model

router.route('/').post(function(req,res,next){
 res.send(req.body)
 form.create(
  {"first_name": req.body.first_name,
  "last_name": req.body.last_name
 })
  .then(function(data){ 
  res.send(data);
  console.log(data);
 }).catch(function(err){console.log(err)});
});

But I need to fire it form client side, not postman. And here i am lost. I can do it with but when i add onSubmit action it doesnt work. And I need to use new function to fire another thing without redirecting to another page. How to pass this.refs.first_name.value to body so that i could use fetch function?? Below react component

added this JavaScript/JSON snippet

export default class Form extends React.Component {
 constructor(props){
  super(props);
  this.handleSubmit = this.handleSubmit.bind(this);
 }
 handleSubmit(event){ 
  event.preventDefault();
  console.log(this.refs.first_name.value);
  fetch('/', {
   method: 'post',
   body: {
    "first_name": this.refs.first_name.value
   }
  });
 };
 render () {
  return (
   
   <div id="signup">
    <form onSubmit={this.handleSubmit}>
        <input ref="first_name" placeholder="First Name" type="text" name="first_name"/><br />
        <input placeholder="Last Name" type="text" name="last_name"/><br />
       <button type="Submit">Start</button>
    </form>

   </div>

  )
 }
}

Manoj Rana · Accepted Answer · 2019-08-14 07:24:08Z

22

we need to make sending data as json stringify

handleSubmit(event){ 
    event.preventDefault();
    fetch('/', {
       method: 'post',
       headers: {'Content-Type':'application/json'},
       body: JSON.stringify({
            "first_name": this.state.firstName
       })
    });
};

answered Aug 14, 2019 at 7:24

Manoj Rana

3,4982 gold badges27 silver badges36 bronze badges

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

Comments

Amir Hoseinian · Accepted Answer · 2017-07-10 05:32:07Z

20

I guess the way you are using ref has been deprecated. try below see if you have any luck.

export default class Form extends React.Component {
 constructor(props){
  super(props);
  this.handleSubmit = this.handleSubmit.bind(this);
 }

 handleSubmit(event){ 
  event.preventDefault();
  fetch('/', {
   method: 'post',
   headers: {'Content-Type':'application/json'},
   body: {
    "first_name": this.firstName.value
   }
  });
 };

 render () {
  return (
   
   <div id="signup">
    <form onSubmit={this.handleSubmit}>
        <input ref={(ref) => {this.firstName = ref}} placeholder="First Name" type="text" name="first_name"/><br />
        <input ref={(ref) => {this.lastName = ref}} placeholder="Last Name" type="text" name="last_name"/><br />
       <button type="Submit">Start</button>
    </form>

   </div>

  )
 }
}

Here is a link to react docs about refs

edited Jul 10, 2017 at 5:32

answered Jul 9, 2017 at 12:47

Amir Hoseinian

2,3622 gold badges24 silver badges27 bronze badges

7 Comments

Kamil Lewandowski Over a year ago

Perhaps you are right with way to bind refs. But it's not solution yet. I get only error in server console: "Error: Can't set headers after they are sent. at ServerResponse.OutgoingMessage.setHeader (_http_outgoing.js:357:11)..." I in db I see new document with value=0.

Amir Hoseinian Over a year ago

Try headers: {'Content-Type':'application/json'}, in fetch see if that helps

Kamil Lewandowski Over a year ago

Nope, still the same

Amir Hoseinian Over a year ago

here you are sending the request to /form not / and also try using body: JSON.stringify({ "first_name": this.firstName.value })

Ragav Y Over a year ago

body: JSON.stringify(<insert your data here>) worked for me.

|

Sabri Mevis · Accepted Answer · 2019-09-30 07:24:14Z

3

This is how I made my post request in React.js;

const res = fetch('http://15.11.55.3:8040/Device/Movies', {
    method: 'post',
    headers: { 'Content-Type': 'application/json' },
    body: {
     id: 0,
    },
   })
   .then((response) => response.json())
   .then((responseJson) => {
     return responseJson.movies;
   })
   .catch((error) => {
     console.error(error);
   });

answered Sep 30, 2019 at 7:24

Sabri Mevis

2,4712 gold badges33 silver badges41 bronze badges

Comments

Rohith Murali · Accepted Answer · 2018-06-26 18:00:06Z

You can use the concept of controlled components.

For that, add state value,

constructor(props){
  super(props);
  this.handleSubmit = this.handleSubmit.bind(this);
  this.state={ firstname:"", lastname:""} 
}

Now input fields to be like,

<input placeholder="First Name" type="text" value={this.state.firstname} onChange={(ev)=>this.setState({firstname:ev.target.value})}/>
<input placeholder="Last Name" type="text" value={this.state.lastname} onChange={(ev)=>this.setState({lastname:ev.target.value})}/>

and handleSubmit should be like,

handleSubmit(event){ 
  event.preventDefault();
  fetch('/', {
   method: 'post',
   headers: {'Content-Type':'application/json'},
   body: {
    "first_name": this.state.firstName
   }
  });
 };

Collectives™ on Stack Overflow

REACT fetch post request

4 Answers 4

Comments

7 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related