CODEWITHSUNDEEP
reactjspostaxios
Francisco Aguilera
Francisco Aguilera

Reputation: 147

How to append form data in an Axios Post request in REACT

Currently I have the following functions which makes the POST properly if i handcode the data to send

       constructor() {
        super()
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(event) {
        event.preventDefault();
        const form = new FormData(event.target);

        axios({
            method: 'post',
            url: 'http://localhost:3003/register',
            data: qs.stringify({
              email: 'testing',   //as you can see I have handcoded the data, and it posts properly
              password: 'testing'
            }),
            headers: {
              'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
            }
          })


    }



    render() {
        return (
            <div className="content-landing">

                <form onSubmit={this.handleSubmit}>
                    <label htmlFor="email">Enter email</label>
                    <input id="email" name="email" type="email" />

                    <label htmlFor="password">Enter password</label>
                    <input id="password" name="password" type="password" />


                    <button>Register</button>
                </form>

            </div>

        )
    }
}

But how do i feed this post request in axios with the data from the form?

axios({
                method: 'post',
                url: 'http://localhost:3003/register',
                data: qs.stringify({
                 form //referencing const form
                }),
                headers: {
                  'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
                }
              })

I have tried the above code to get the const form with the form data, but it wont do anything.

So im lost there since I dont know how to feed the request with the data within the form.

Upvotes: 1

Views: 1253

Answers (2)

lomse
lomse

Reputation: 4165

Well, you need to do this the react way, which is keeping the value of the email and password inputs in a state and retrieving them whenever you need them. To keep the email value in a state, add an onChange event handler on the email and password inputs like this: 

<input id="email" name="email" type="email" onChange={this.handleChange} value={this.state.email} />
<input id="password" name="password" type="password" onChange={this.handleChange} value={this.state.password} />

With the handleChange as shown below: 

handleChange = (evt)=> { // If you are using typescript, type evt like this evt: React.ChangeEvent<HTMLInputElement>
    const target = event.target;
    const value = target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
}

The handleChange function will save both email and password in the state. Now you can retrieve them and use whenever you need them like this: 

const {email, password} = this.state;

Oh first remember to initialize the values for both email and password

I have updated your code as shown below:

    class MyAwesomeComponent extends React.Component {
       constructor() {
          super()
          this.state = {
             email: "",
             password: ""
          }
          this.handleSubmit = this.handleSubmit.bind(this);
          this.handleChange = this.handleChange.bind(this)
       }

       handleChange = (evt)=> {
        const target = event.target;
        const value = target.value;
        const name = target.name;

        this.setState({
          [name]: value
        });
       }

       handleSubmit(event) {
        event.preventDefault();
        const form = new FormData(event.target);
        const {email, password} = this.state;

        axios({
            method: 'post',
            url: 'http://localhost:3003/register',
            data: qs.stringify({email,password}),
            headers: {
              'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
            }
          })
       }

       render() {
        return (
            <div className="content-landing">

                <form onSubmit={this.handleSubmit}>
                    <label htmlFor="email">Enter email</label>
                    <input id="email" name="email" type="email" onChange={this.handleChange} value={this.state.email} />

                    <label htmlFor="password">Enter password</label>
                    <input id="password" name="password" type="password" onChange={this.handleChange} value={this.state.password} />


                    <button>Register</button>
                </form>

            </div>

        )
      }
    }

   export default MyAwesomeComponent

For more information, check out the React.js documentation

Upvotes: 3

mouchin777
mouchin777

Reputation: 1588

Change this code

  data: qs.stringify({
              email: event.target.email.value,
              password: event.target.password.value
            })

Upvotes: -1

Related Questions