How to pick React JS form input field value using Axios

Question

I am creating a form in react js and need to pick input field values using Axios.

 axios({ 
        method: 'post', 
        url: '/admin/escalations/newUser', 
        // how to fetch userEmail from the form
        data: { userEmail: this.state.userEmail

         } 
        })
}

form snippet

<label for="userEmail">Email ID: </label><br/>
<input type="text" id="userEmail" name="userEmail" value={this.userEmail} placeholder="Meltwater email ID" />

Please provide a solution for the above question

Answer 1

You have to add this.setState in onChange attributes and value is this.state.userEmail of input like this:

<input type="text" id="userEmail" name="userEmail" value={this.state.userEmail} placeholder="Meltwater email ID" onChange={e => this.setState({userEmail: e.target.value})}/>

hopefully it will work

Answer 2

You need to maintain state and when user enters some value, you need to fire an event that will set the value in the state and from state you can access that value in your axios request. Check the sample code below..

class someClass extends React.Component{
  ~~~
  ~~~
 state : {
  userEmail : ''
 }

 takeEmailValue(e) { this.setState({ userEmail: e.target.value })}

 // add the onChange event on your input field

 <label for="userEmail">Email ID: </label><br/>
 <input type="text" id="userEmail" name="userEmail" onChange={this.takeEmailValue} placeholder="Meltwater email ID" />
}

Answer 3

In your component constructor, you should declare your state like so :

constructor(){
   super()
   this.state = {
      userMail: ""
   }
}

Once you've done that, we will create a function to update the userMail value.

updateMail(event){
   this.setState({
      userMail: event.target.value
   }, () => console.log(this.state.userMail)
}

Finally, you will just need to specify this function on your input tag like so :

<label for="userEmail">Email ID: </label><br/>
<input type="text" id="userEmail" name="userEmail" onChange={this.updateMail.bind(this)} placeholder="Meltwater email ID" />

So the updateMail function will, as indicates its name, update the userMail state every time you change the value of your input.

Thanks to that, the userMail state will be up to date everytime you press a key on the input.

Then, you can re-use your axios method to post this value.

I hope it will help you.

Answer 4

try like this it may help you,

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

class Sample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userEmail: ""
    };
  }
  componentDidMount() {
    axios({
      method: "post",
      url: "/admin/escalations/newUser",
      // how to fetch userEmail from the form
      data: { userEmail: this.state.userEmail }
    });
  }

  render() {
    const { userEmail } = this.state;
    console.log(userEmail);
    return (
      <div>
        <input
          name="userEmail"
          placeholder="enter your mail"
          value={userEmail}
          onChange={e => this.setState({ userEmail: e.target.value })}
        />
      </div>
    );
  }
}

export default Sample;`