Btukfyl

In my react and spring-boot application, I have 3 drop-down menus and a submit button. Once button click, it takes the value from the drop-down and sends the request to the controller and fetch DB values and finally display on a different page.

I tried following, but it was not successful. How to solve this issue?

return (

      <form onSubmit={this.handleSubmit}>

      <div className="persent-one">

        <i className="fa fa fa-caret-down" aria-hidden="true"></i>

        <select className="textboxstyle" onChange={this.changeBrandLOV}><option value='-1'>Select Brand</option><option value ='0'>ALL</option>{optionItems}</select>

     </div>



     <div className="persent-one">

        <i className="fa fa-caret-down" aria-hidden="true"></i>

        <select className="textboxstyle" onChange={this.changeFamilyLOV}><option value='-1'>Select Family</option><option value ='0'>ALL</option>{familyOptionItems}</select>

     </div>

     <div className="persent-one">

        <i className="fa fa fa-caret-down" aria-hidden="true"></i>

        <select className="textboxstyle"><option key='-1'>Select Model</option><option key='0'>ALL</option>{modelOptionItems}</select>

     </div>

     <div className="persent-one less-btn">

        <input type="submit" name="submit" value="Search" className="btn btn-info cst-btn" id="srch"/>

     </div>

  </div>

function

handleSubmit(event) {

        event.preventDefault();

        this.props.form.validateFields((err, values) => {

            if (!err) {

                const searchRequest = Object.assign({}, values);

                searchModes(searchRequest,0,50)

                .then(response => {

                    localStorage.setItem(ACCESS_TOKEN, response.accessToken);

                }).catch(error => {

                    if(error.status === 401) {

                        notification.error({

                            message: 'Polling App',

                            description: 'Your search selections are incorrect. Please try again!'

                        });

                    } else {

                        notification.error({

                            message: 'Polling App',

                            description: error.message || 'Sorry! Something went wrong. Please try again!'

                        });

                    }

                });

            }

        });

    }

function

export function searchModes(searchRequest,page, size) {

  page = page || 0;

  size = size || POLL_LIST_SIZE;



  return request({

      url: API_BASE_URL + "/models?page=" + page + "&size=" + size,

      method: 'GET'

  });

}

In Controller class

@RestController

@RequestMapping("/api/models")

public class ModelController {





    @GetMapping

    public PagedResponse<Model> getModels(@CurrentUser UserPrincipal currentUser,

                                                @RequestParam(value = "page", defaultValue = AppConstants.DEFAULT_PAGE_NUMBER) int page,

                                                @RequestParam(value = "size", defaultValue = AppConstants.DEFAULT_PAGE_SIZE) int size) {



        return modelService.getAllModels(currentUser, page, size);

    }

error: