Axios Post Form With Reactjs

So I have this post method with Axios and if I submit this, it said Uncaught (in promise) Error: Network Error at createError (createError.js:16) at XMLHttpRequest.ha

Solution 1:

eventHandler for each state. Is there any way I can do this better? yes it would work something like this

importReact, { Component } from'react';

classUserFormextendsComponent {
  constructor() {
    super();
    this.state = {
      fname: '',
      lname: '',
      email: '',
    };
  }

  onChange = (e) => {
    /*
      Because we named the inputs to match their
      corresponding values in state, it's
      super easy to update the state
    */this.setState({ [e.target.name]: e.target.value });
  }

  render() {
    const { fname, lname, email } = this.state;
    return (
      <form><inputtype="text"name="fname"value={fname}onChange={this.onChange}
        /><inputtype="text"name="lname"value={lname}onChange={this.onChange}
        /><inputtype="text"name="email"value={email}onChange={this.onChange}
        /></form>
    );
  }
}

and about submission of the form your axios post would work something like this

onSubmit = (e) => {
    e.preventDefault();
    // get our form data out of stateconst { fname, lname, email } = this.state;

    axios.post('/', { fname, lname, email })
      .then((result) => {
        //access the results here....
      });
  }

Solution 2:

axios.post(url[, data[, config]])'s 3rd argument is the Axios configuration object, which you're inadvertently passing in in

axios.post('http://localhost:5000/users', ({userid: this.state.userid}, {fullname: this.state.fullname} ))

so the request gets misconfigured and doesn't work.

Instead, all of the data to POST should be in the single data object.

axios.post('http://localhost:5000/users', {
  userid: this.state.userid,
  fullname: this.state.fullname,
})

Solution 3:

So apparently I have to add eventhandler for each state. Is there any way I can do this better?

importReactfrom'react';
import axios from'axios';
import { Form } from'antd';
// import { List, Card, Form } from 'antd';constFormItem = Form.Item;

exportdefaultclassFormUserextendsReact.Component {
  // constructor(props) {//   super(props)//   this.state = {
  state = {
    userid: '',
    fullname: '',
    usergroup: '',
    emailid: '',
    mobile: '',
    title: '',

  };

  handleUserIDChange = event => {this.setState({ userid: event.target.value })}
  handleFullNameChange = event => {this.setState({ fullname: event.target.value })}
  handleUserGroupChange = event => {this.setState({ usergroup: event.target.value })}
  handleEmailIDChange = event => {this.setState({ emailid: event.target.value })}
  handleMobileChange = event => {this.setState({ mobile: event.target.value })}
  handleTitleChange = event => {this.setState({ title: event.target.value })}

  handleSubmit = event => {
    event.preventDefault();

    // const userform = {userid: this.state.userid};// const fullnameForm = {fullname: this.state.fullname};// const usergroupForm = {usergroup: this.state.usergroup};// const emailidForm = {emailid: this.state.emailid};// const mobileForm = {mobile: this.state.mobile};// const titleForm = {title: this.state.title};

    axios.post('http://localhost:5000/users',
      { userid: this.state.userid, fullname: this.state.fullname, usergroup: this.state.usergroup, emailid: this.state.emailid, mobile: this.state.mobile, title: this.state.title },)
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
  }

  render() {
    return (

      // const formItemLayout = {//   labelCol: {//     xs: { span: 24 },//     sm: { span: 8 },//   },//   wrapperCol: {//     xs: { span: 24 },//     sm: { span: 16},//   },// };<FormonSubmit={this.handleSubmit}><FormItem><label>User Project ID:  <inputtype="text"name="this.state.userid"onChange={this.handleUserIDChange} /></label></FormItem><FormItem><label>Full Name:  <inputtype="text"name="this.state.fullname"onChange={this.handleFullNameChange} /></label><br /></FormItem><FormItem><label>User Group:  <inputtype="text"name="this.state.usergroup"onChange={this.handleUserGroupChange} /></label><br /></FormItem><FormItem><label>Email:  <inputtype="text"name="this.state.emailid"onChange={this.handleEmailIDChange} /></label></FormItem><FormItem><label>Mobile:  <inputtype="text"name="this.state.mobile"onChange={this.handleMobileChange} /></label></FormItem><FormItem><label>Title:  <inputtype="text"name="this.state.title"onChange={this.handleTitleChange} /></label></FormItem><buttontype="submit">Add</button></Form>
    )
  }
}