How to send data from a form data to a database using ReactJS , Node.js and MySQL queries?

Question

I currently have my database set up with tables and it is correctly connected to the node server. The problem is that when it executes it stores the values as null or undefined which makes me feel like that I am not correctly sending the data from the form.

Below is my Reactjs component file which contains a form and handle functions

import React, {Component} from 'react';

class RegisterComponent extends React.Component {

  constructor() {
    super();

    this.state = {
      username: '',
      email:'',
      password:'',


      };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    event.preventDefault();


    const data = { username:this.state.username, email:this.state.email , password:this.state.password }

    fetch('/api/createAccount', { method: 'POST', 

    body: JSON.stringify(data), // data can be `string` or {object}!

    headers:{ 'Content-Type': 'application/json' } })

    .then(res => res.json())

    .catch(error => console.error('Error:', error))

    .then(response => console.log('Success:', response));
   }



  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label htmlFor="username">Enter username</label>
        <input id="username" name="username" type="text" />

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

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

        <button>Send data!</button>
      </form>
    );
  }
}

export default RegisterComponent;

Below is the api request script

app.post('/api/createAccount', function(req, res) {
    const username = req.body.username;
    const password = req.body.password;
    const email = req.body.email;



  con.query(`INSERT INTO usertest2 SET username = ? , email = ? , password = ? `, [username , email, password] ,  function(err, result) {

  console.log(username);
  if (err) throw err;
      res.send(' successfully');

    });


  });

Is your app using bodyParser()? What gets printed when you console.log(req.body.username)? — Kevin H
– Kevin H, Commented Apr 29, 2019 at 23:20
yes it is @KevinHernandez when i tried that command you requested it prints undefined — John
– John, Commented Apr 29, 2019 at 23:22
Add app.use(bodyParser.json()) and get rid of app.use(bodyParser.urlencoded({ extended: false })); — Kevin H
– Kevin H, Commented Apr 29, 2019 at 23:24

seanulus · Accepted Answer · 2019-04-29 23:23:09Z

3

You don't have a function changing your state values. Make something like:

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

Then add those to the onChange for all of your inputs:

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

answered Apr 29, 2019 at 23:23

seanulus

8854 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

John Over a year ago

sorry im new to react and node. but do i repeat this handleChange() for each input so like for the username , password, email. Or can I put is all underneath by repeating this.state

seanulus Over a year ago

You would add onChange={this.handleChange} to each <input> element

John Over a year ago

ah ok , I shall try this now

Collectives™ on Stack Overflow

How to send data from a form data to a database using ReactJS , Node.js and MySQL queries?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related