Handling GET request with axios and express

Question

I am really new to react. I created a simple form with bootstrap.

I created a MySQL database. I set up an express server on port 3001 and was able to post my form data to the database successfully.

Now I am trying to send an id through the form and get the details. Can someone please guide me through this. I looked over the internet but could not find a clear example yet.

Thanks in advance

My app.js:

import React, { Component } from "react";
import "bootstrap/dist/css/bootstrap.css";
import "./App.css";
import axios from "axios";
import { Form } from "react-bootstrap";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      id: "",
      fName: "",
      lName: "",
      password: "",
      email: "",
      persons: [],
    };
  }

  handleOnSubmit(event) {
    event.preventDefault();
    alert("Data Submitted Successfully");

//--------------------------------------------------------------------------------
//POST Request

// const user = {
//   fName : this.state.fName,
//   lName : this.state.lName,
//   // email : this.state.email,
//   // password : this.state.password,
// };

// axios.post(`http://localhost:3001`, { user })
// .then(res => {
//   console.log(res);
//   console.log(res.data);
// })
  }

handleOnChange(event) {
    let name = event.target.name;
    let value = event.target.value;
    this.setState({
      [name]: value
    });
  }

  //GET Request

  handleOnSearch() {
    axios.get(`http://localhost:3001`,{
      params: {
        id: this.state.id
      }
    })
      .then(res => {
        console.log(this.state.persons);
        this.setState({ persons: res.data });
      });
  }

  render() {
    return (
      <div>
        <Form onSubmit={this.handleOnSubmit.bind(this)}>
          <Form.Group controlId="firstName">
            <Form.Label>First Name</Form.Label>
            <Form.Control
              type="text"
              placeholder="Enter first name"
              name="fName"
              onChange={this.handleOnChange.bind(this)}
            />
          </Form.Group>
      <Form.Group controlId="lastName">
        <Form.Label>Last Name</Form.Label>
        <Form.Control
          type="text"
          placeholder="Enter last name"
          name="lName"
          onChange={this.handleOnChange.bind(this)}
        />
      </Form.Group>


      <div>
        <button
          variant="primary"
          type="submit"
          className="btn btn-primary mx-1"
        >
          Submit
        </button>
        <button variant="primary" type="reset" className="btn btn-warning">
          Clear
        </button>
      </div>
      <hr />
      <br />
      <div>
        <Form.Group controlId="id">
          <Form.Label>Id</Form.Label>
          <Form.Control
            type="text"
            placeholder="Enter id"
            name="id"
            onChange={this.handleOnChange.bind(this)}
          />
        </Form.Group>

        <button variant="primary" className="btn btn-warning mx-1" onClick={this.handleOnSearch.bind(this)}>
          Search
      </button>
      </div>
    </Form>
  </div>
    );
  }
}

export default App;

my server.js:

// Creating the express app
var express = require('express');
var app = express();

// Getting mysql database access
var mysql = require('mysql');

// Enabling support to the Cross-Origin Resource Sharing protocol
var cors = require('cors');
app.use(cors());

// Extracting the body of the req to expose it on command
var bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// Writing connection details
var con = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '',
    database: 'reactmysql'
})

// Connecting to the database
con.connect((err) => {
    if (err) {
        console.log("There was an error connecting to the database: " + err);
    }
    console.log("Connected to the database");
})

// Starting listening on port 3001
app.listen(3001, () => {
    console.log("I am listening on port 3001");
})

// Getting the data from the body whenever user inputs them and assigning them to backend variables
app.post('/', (req, res) => {
    // var fName = req.body.user.fName
    // var lName = req.body.user.lName
    console.log(req);
    console.log(res);
    // var sql = "INSERT INTO ('firstname', 'lastname') VALUES ('" + fName + "', '" + lName + "')"
    var sql = "SELECT * FROM `mytable`";
    con.query(sql, (err, result) => {
    if (err) {
        console.log("There was an error in your query: " + err);
    }
    console.log("Query Executed Successfully");
    console.log(result)
    })
})

Answer 1

Add the express host in package.json of react app "proxy": "http://localhost:3001/"

app.js

//GET Request

  handleOnSearch() {
    axios.get(`/${this.state.id}`
    })
      .then(res => {
        console.log(this.state.persons);
        this.setState({ persons: res.data });
      });
  }

server.js

app.get('/:id', (req, res) => {
    const id = req.params.id;
    //Rest of the code

})

edit
You can try this with your old code

In app.js add preventDefault()

handleOnSearch(event) {
    event.preventDefault();
    axios
      .get(`http://localhost:3001`, {
        params: {
            id: this.state.id,
        },
      })
      .then((res) => {
        console.log(this.state.persons);
        this.setState({ persons: res.data });
      });
  }

server.js

app.get('/', (req, res) => {
  const id = req.query.id;
  //Rest of the code

})

Answer 2

Use this with all handling.

axios.get('/:id', {
params: {
}
  })
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
  })
.finally(function () {
// always executed
});