Title: Can't make a post call in react
Tags: jquery;ajax;reactjs
Question: I'm learning react and I have started by creating a CRUD app in react. I am able to make the get calls but the post calls don't go through for some reason. My App.js file is:



```import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import $ from 'jquery'
import request from "../node_modules/superagent/superagent";
import axios from 'axios'

import {UserForm} from './components/userForm'

class App extends Component {

  constructor(props){
    super(props)
    this.state = {
      users: [],
      name: '',
      email: '',
      password: ''
    }
    this.handleInputChange = this.handleInputChange.bind(this)
    this.handlePostRequest = this.handlePostRequest.bind(this);
  }

  handleInputChange(state, event) {
    this.setState({[state]: event.target.value});
  }

  handlePostRequest(event) {
    var data = {
      name: this.state.name,
      email: this.state.email,
      password: this.state.password
    }

    axios.post('http://localhost:8080/api/users', {
      data: data
    })
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });

  /*request
  .post('http://localhost:8080/api/users')
  .set('Content-Type', 'application/x-www-form-urlencoded')
  .send({ name: this.state.name, email: this.state.email, password: this.state.password })
  .end(function(err, res){
  console.log(res.text);
  });
    var self

    event.preventDefault()
    self = this

    console.log(this.state);

    var data = {
      name: this.state.name,
      email: this.state.email,
      password: this.state.password
    }

    // Submit form via jQuery/AJAX
    $.ajax({
      type: 'POST',
      url: 'http://localhost:8080/api/users',
      data: data
    })
    .done(function(result) {
      self.clearForm()
      this.setState({result:result})
    }).bind(this)
    .fail(function(jqXhr) {
      console.log('failed to add the user');
    }).bind(this)*/
    }

  componentDidMount() {
  this.App();
  }

  //making a get call
  App() {
    return $.getJSON('http://localhost:8080/api/users')
      .then((data) =&gt; {
          console.log(data);
        this.setState({users:data});
      })
  }

  render() {
    return (
      <div className="App"&gt;
        <div className="App-header"&gt;
          <img src={logo} className="App-logo" alt="logo" /&gt;
          <h2&gt;Welcome to React CRUD App</h2&gt;
        </div&gt;
        <div className = "Crud-App" &gt;

          <div className = "users-list" &gt;
            <ul&gt;
              {this.state.users.map( user =&gt; 
                <li key = {user._id} &gt; 
                  {user.name} 
                </li&gt; 
              )} 
            </ul&gt;
          </div&gt;

          <UserForm handleInputChange = {this.handleInputChange} name = {this.state.name} 
          email = {this.state.email} password = {this.state.password} /&gt;
        </div&gt;
      </div&gt;
    );
  }
}

export default App;```




And my userForm component file is:



```import React from 'react'

export const UserForm = (props) =&gt; (
    <form&gt;
        <label&gt; Name: </label&gt; <input onChange={props.handleInputChange.bind(this, 'name')} 
            value={props.name} /&gt;
        <label&gt; Email: </label&gt; <input type="text" onChange={props.handleInputChange.bind(this, 'email')} 
            value={props.email} /&gt;
        <label&gt; Password: </label&gt; <input type="text" onChange={props.handleInputChange.bind(this, 'password')} 
            value={props.password} /&gt;
        <button type="button" className = "pure-button pure-button-primary" onClick={props.handlePostRequest}&gt;Add User</button&gt;
    </form&gt;
)```




I have tried ajax, axios, superagent and fetch so far as you can see the commented code in the App.js file. But pressing the submit button does johnsonmary@example.com. Any help would be appreciated. Thanks


Here is the accepted answer: Stateless function components do not have a ```this```. You should not re-bind the ```onChange``` handlers in your ```UserForm``` component.

Also, rewrite your handler signature so that it only takes the ```event``` argument:

```  constructor(props) {
    super(props);
    this.makeHandleInputChange = this.makeHandleInputChange.bind(this);
  }

  makeHandleInputChange(state) {
    return e =&gt; {
      this.setState({[state]: event.target.value});
    };
  }
```

Lastly, update your usage of ```UserForm```:

```<UserForm
  makeHandleInputChange={this.makeHandleInputChange}
  name={this.state.name} 
  email={this.state.email}
  password={this.state.password} /&gt;
```

and the definition of ```UserForm``` itself:

```export const UserForm = (props) =&gt; (
  <form&gt;
    <label&gt; Name: </label&gt;
    <input
      onChange={props.makeHandleInputChange('name')} 
      value={props.name} /&gt;
    { /* ...the rest of the components here... */ }
  </form&gt;
)
```

EDIT: You are not passing the ```handlePostRequest``` as a prop to the ```UserForm```.

```<UserForm
  makeHandleInputChange={this.makeHandleInputChange}
  handlePostRequest={this.handlePostRequest}
  name={this.state.name} 
  email={this.state.email}
  password={this.state.password} /&gt;
```

Comment for this answer: The event handler is only called with the `event` argument, you should pass a handler with the correct signature. See edit.
Comment for this answer: See final edit. You're never pass the `handlePostRequest` prop to the `UserForm` component. :)
Comment for this answer: Without binding it throws an error saying "cannot read property 'target' of undefined"
Comment for this answer: I made the suggested changes but the post call still doesn't work. When I type data  into the form fields, the state changes correctly but the post call that I have written doesn't work for some reason, i.e. pressing the "Add User" button doesn't send a post call
Comment for this answer: Thanks mate. Works like a charm. :)


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2017:00:07/26/17', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<jquery><ajax><reactjs>', 'Title': "Can't make a post call in react", 'ViewCount': 307, 'id': 45338207, 'user_AboutMe': None, 'user_AccountId': 11421284.0, 'user_DisplayName': 'john doe', 'user_Reputation': 55.0, 'user_Views': 14.0, 'user_id': 8372702.0}}