Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

156
Views
Unable to send data from React to Springboot

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();
    }

}
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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();
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!