Unable to send data from React to Springboot

Question

I couldn't save the data to the database. I can't understand what the issue is. API is working when tested it using Postman. I want to store name, dob, classroom, division and gender values to the database.

 <center><button type="submit" className="btn btn-primary" onClick={this.addStudent}>Register</button></center>

onClick in the button element will call the below addStudent() function.

addStudent (e) {
            let studentData = {
                name: this.state.name,
                dob: this.state.dob,
                classroom: this.state.classroom,
                division: this.state.division,
                gender: this.state.gender
            };
            
            JSON.stringify(studentData);
        
            ApiService.getStudents(studentData).then((response) => {
                console.log(response);
            });
        
        }

ApiService() is given below:

import axios from "axios";

const SAVE_DATA = "http://localhost:8080/api/save"
const STUDENT_DATA = "http://localhost:8080/api/students"

class ApiService {
    saveStudent(studentData) {
        console.log("Inside saveStudent()")
        return axios.post(SAVE_DATA, studentData);
    }

    getStudents() {
        return axios.get(STUDENT_DATA);
    }
}

export default new ApiService();

Springboot API Controller is given below:

package com.student.registration.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

import com.student.registration.entity.Student;
import com.student.registration.services.RegServices;

@CrossOrigin(origins = "http://localhost:3000")
@RestController
@RequestMapping(value = "/api")
public class RegController {
    
    @Autowired
    RegServices services;
    
    @RequestMapping(value = "/save", method = RequestMethod.POST)
    public String saveData(@RequestBody Student student) {
        return services.save(student);
    }
    
    @RequestMapping(value = "/students")
    public List<Student> getAllStudents() {
        return services.getAll();
    }

}

Answer 1

Replace your click function with this because you're calling the wrong function from your API service

addStudent (e) {
    let studentData = {
        name: this.state.name,
        dob: this.state.dob,
        classroom: this.state.classroom,
        division: this.state.division,
        gender: this.state.gender
    };
    
    studentData = JSON.stringify(studentData);

    ApiService.saveStudent(studentData).then((response) => {
        console.log(response);
    }).catch((error) => console.log(error));
}

and add async/await in your service

import axios from "axios";

const SAVE_DATA = "http://localhost:8080/api/save"
const STUDENT_DATA = "http://localhost:8080/api/students"

class ApiService {
    async saveStudent(studentData) {
        console.log("Inside saveStudent()")
        return await axios.post(SAVE_DATA, studentData);
    }

    async getStudents() {
        return await axios.get(STUDENT_DATA);
    }
}

export default new ApiService();