User inputs does not submit via Axios POST request, but works fine with hardcoded values in React

I’m trying to send some user input values into my SQL Server table. The question is when I tried the hardcoded values it works a charm and send the data to the table. But when I’m storing and getting user inputs via useState hook it does not work.

When I mean it does not work:

1. No errors get thrown
2. I see response.data as an empty string. Ex: data: ''

Now following is my Test.js:

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

const Test = () => {

  const [machine, setMachine] = useState('');
  const [empID, setEmpID] = useState(0);
 
  const handleMachine = event => {
    setMachine({machine : event.target.value});
    console.log(setMachine);
  }

  const handleEmp = event => {
    setEmpID({emp_no : event.target.value});
    console.log(setEmpID);
  }

  const handleSubmit = event => {
    event.preventDefault();

    console.log(machine, empID);

    axios.post('http://localhost:8090/api/ctms/employees/loggedin',{
        machine: machine, //this is the first user input but if I hard-code it Ex:'MAC1' it works
        emp_no: +empID, //Again same for the second user input, only hard-code works
        date_on: '07/11/2022'
    })
    .then(function (response) {
        console.log(response);
        console.log(response.data);
    })
    .catch(function (error) {
        console.log(error);
        console.log(error.data);
    });
}
    return (
    <div>
        <form onSubmit={handleSubmit}>
        <label>
            Machine:
            <input type="text" name="machine" onChange={handleMachine} />
        </label>
        <label>
            EMP ID:
            <input type="text" name="emp_no" onChange={handleEmp} />
        </label>
        <button type="submit">Add</button>
        </form>
    </div>
    )
 
}

export default Test;

SQL Server table which data goes into. Here all the rows were input as hard-coded values.

Finally following is the React console output after submitting the form.

>Solution :

You’re not setting the state variables to a primitive string value but an object, and it’s clear {machine : 'string'} is not equal to 'string'. Just change setMachine({machine : event.target.value}) to setMachine(event.target.value); same goes for empID.