how to use axios (post) in react

Question

In react application i want to submit input field value to database using axios/post method,since i am new to react i don't have any clear idea. can anyone help me with examples? Thanks in advance

i tried following program

import React, { Component } from 'react';
import axios from 'axios';

var panelStyle = {
    'max-width': '80%',
    margin: '0 auto'
}

class Register extends Component {
  constructor() {
   super();

    this.state = {
      formFields: {username: ''}
    }
  }

  render() {
    return(
     <div>
    <div class="panel panel-primary" style={panelStyle}>
      <div class="panel panel-heading">React Forum - Register</div>
      <div class="panel panel-body">
        <form onsubmit={this.formHandler(this.state.formFields)}>
          <strong>Username:</strong> <br /> <input type="text" name="username" placeholder="Nathaniel" onChange={(e) => this.inputChangeHandler.call(this, e)} value={this.state.formFields.username} /> <br />
          <strong>Email:</strong> <br /> <input type="email" name="email" placeholder="me@example.com" /> <br />
          <strong>Confirm Email:</strong> <br /> <input type="email" name="confirmemail" placeholder="me@example.com" /> <br />
          <strong>Password:</strong> <br /> <input type="password" name="password" placeholder="********" /> <br />
          <strong>Confirm Password:</strong> <br /> <input type="password" name="confirmpassword" placeholder="********" /> <br /><br />
          <button class="btn btn-primary">Register Account</button>
        </form>
      </div>
    </div>
  </div>

    );
  }

  inputChangeHandler(e) {
   let formFields = {...this.state.formFields};
   formFields[e.target.name] = e.target.value;
   this.setState({
    formFields
   });
  }

  formHandler(formFields) {
   axios.post('/api/register', formFields)
     .then(function(response){
       console.log(response);
       //Perform action based on response
   })
     .catch(function(error){
       console.log(error);
       //Perform action based on error
     });
  }
}

export default Register

and got following error in console

index.js:2178 Warning: The tag <children> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

Answer 1

This is how I would set it up using with create-react-app. I am a fan of using async/await. The handleSubmit and handleChange functions will automatically get called with the event and it is easy to reference state from inside handleSubmit to get the data you want to send in the post request. Sometimes, there is no choice but to use a callback style function in the JSX - like (e) => this.whatever(e, this.state.whatever), but if it is avoidable I like to avoid it. Unrelated, but you can pull username, email, etc off of the formFields state in render to save having to type out this.state a lot.

   import React, { Component } from 'react'
   import axios from 'axios'

    class Register extends Component {

      state = {
        formFields: { user: '', email: '' }
      }  

      handleSubmit = async e => {
        e.preventDefault()
        const { formFields } = this.state
        try {
          let response = await axios.post('/api/register', formFields)
          // handle response
        } catch (error) {
          // handle error
        }

      }

      handleChange = e => {
        const { formFields } = this.state
        formFields[e.target.name] = e.target.value
        this.setState({ formFields })
      }

      render() {
        const { username, email } = this.state.formFields
        return () {
          <div>
            <form onSubmit={this.handleSubmit}>
               <strong>Username:</strong> <br /> <input type="text" name="username" placeholder="Nathaniel" onChange={this.handleChange} value={username} /> <br />
               <strong>Email:</strong> <br /> <input type="email" name="email" placeholder="me@example.com" onChange={this.handleChange} value={email}/> <br />
            <button>Register Account</button>
            </form>
          </div>
        }
      }
    }

export default Register

Answer 2

Use maxWidth instead max-width. Use onSubmit={(e) => this.formHandler(e, this.state.formFields)} instead this.formHandler(this.state.formFields) because we need variable e to prevent form request html

Use

formHandler(e, formFields) {
        e.preventDefault();
}

instead inputChangeHandler(e) {}

import React, { Component } from 'react';
import axios from 'axios';

var panelStyle = {
    maxWidth: '80%',
    margin: '0 auto'
}

Here the code can run.

class Register extends Component {
    constructor() {
        super();

        this.state = {
            formFields: {username: ''}
        }
    }

    render() {
        console.log(this.state)
        return(
            <div>
                <div className="panel panel-primary" style={panelStyle}>
                    <div className="panel panel-heading">React Forum - Register</div>
                    <div className="panel panel-body">
                        <form onSubmit={(e) => this.formHandler(e, this.state.formFields)}>
                            <strong>Username:</strong> <br /> <input type="text" name="username" placeholder="Nathaniel" onChange={(e) => this.inputChangeHandler.call(this, e)} value={this.state.formFields.username} /> <br />
                            <strong>Email:</strong> <br /> <input type="email" name="email" placeholder="me@example.com" onChange={(e) => this.inputChangeHandler.call(this, e)} value={this.state.formFields.email}/> <br />
                            <strong>Confirm Email:</strong> <br /> <input type="email" name="confirmemail" placeholder="me@example.com" onChange={(e) => this.inputChangeHandler.call(this, e)} value={this.state.formFields.confirmemail}/> <br />
                            <strong>Password:</strong> <br /> <input type="password" name="password" placeholder="********" onChange={(e) => this.inputChangeHandler.call(this, e)} value={this.state.formFields.password}/> <br />
                            <strong>Confirm Password:</strong> <br /> <input type="password" name="confirmpassword" placeholder="********" onChange={(e) => this.inputChangeHandler.call(this, e)} value={this.state.formFields.confirmpassword}/> <br /><br />
                            <button className="btn btn-primary">Register Account</button>
                        </form>
                    </div>
                </div>
            </div>

        );
    }

    inputChangeHandler(e) {
        let formFields = {...this.state.formFields};
        formFields[e.target.name] = e.target.value;
        this.setState({
            formFields
        });
    }

    formHandler(e, formFields) {
        e.preventDefault();
        axios.post('/api/register', formFields)
            .then(function(response){


                console.log(response);
                //Perform action based on response
            })
            .catch(function(error){


                console.log(error);
                //Perform action based on error
            });
    }
}

export default Register