Update functionality in React - Fetch values and populate onto input boxes - reactjs

Question

I am a newbie to react and I am trying to fetch data and to populate those values onto the input boxes but I couldn't. I don't understand the error.
My code and screenshot is below.
UpdateLevel.js
import React, { Component } from "react";
import Sidebar from '../Sidebar';
import JobService from "../../Services/JobService";
// import '../css/Create.css';
import './../Job/Job.css';
// import '../../Job.css';
import 'react-toastify/dist/ReactToastify.css';
import { Link } from "react-router-dom";
class UpdateLevel extends React.Component{
constructor(props){
super(props)
this.state={
id:0,
level:'',
levelDes:'',
errors:{}
}
this.id=this.id.bind(this);
this.level=this.level.bind(this);
this.levelDes=this.levelDes.bind(this);
this.UpdateInterviewLevel=this.UpdateInterviewLevel.bind(this);
this.cancel=this.cancel.bind(this);
}
componentDidMount(){
console.log(this.props.match);
JobService.GetInterviewLevelById(localStorage.getItem('id')).then((res)=>{
let level=res.data;
this.setState({
id:localStorage.getItem('id')
,level: level.level,
levelDes:level.levelDes
});
});
}
UpdateInterviewLevel=(e)=>{
e.preventDefault();
let errors={};
// var pattern=new RegExp( /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{4,16}$/);
// var patt=new RegExp(/\d$/);
let formvalidstatus=true;
if(this.state.level==""){
formvalidstatus=false;
errors["level"]="Please enter Level !";
}
if((this.state.levelDes)==""){
formvalidstatus=false;
errors["levelDes"]="Please enter Description!";
}
this.setState({
errors:errors
});
if(formvalidstatus==true){
let lev={id:parseInt(this.state.id),
level:this.state.level,
levelDes:this.state.levelDes,
};
console.log('lev=>'+lev.level+ " " + lev.levelDes
);
console.log('lev=>'+JSON.stringify(lev));
JobService.UpdateInterviewLevel(lev.id,lev).then(res=>{
window.location="/viewlevel";
localStorage.setItem('Updatestatus',true);
alert('Interview Level Updated successfully')
});
}
}
id(event){
this.setState({id:event.target.value});
}
level(event){
this.setState({level:event.target.value});
}
levelDes(event){
this.setState({levelDes:event.target.value});
}
cancel(){
alert( window.location.replace('http://localhost:3000/'))
}
render(){
// console.log(this.props.match.params);
return(
<div>
<div class="side">
<Sidebar />
</div>
<form className="addformjob">
<h2><strong>Update Interview Level</strong></h2>
<label>Id</label>
<input id="id" name="id" value={ this.state.id} onChange={this.id}></input><br></br>
{/*
<div className="errorMsgJob">{this.state.errors.id}</div>
*/}
<label>Level</label>
<input id="level" type="text" name="level" value={ this.state.level} onChange={this.level}></input><br></br>
<div className="errorMsgJob">{this.state.errors.level}</div>
<br></br>
<label >Description</label>
<input id="levelDes" type="text" name="levelDes" value={ this.state.levelDes} onChange={this.levelDes}></input><br></br>
<div className="errorMsgJob">{this.state.errors.levelDes}</div>
<br></br>
<br></br>
<button id="jobb" className="btn btn-success" onClick={(e)=>this.UpdateInterviewLevel(e)}>Update</button>
<br></br>
<br></br>
<Link to={'/viewlevel'}>
<button className="btn btn-outline-dark" type="submit" onClick={()=>{window.location='/viewlevel'}}>Back</button>
</Link>
<br></br>
</form>
</div>
)
}
}
export default UpdateLevel
JobService.js
import axios from "axios";
const Job_Baseurl="https://localhost:44348/api/Jobs";
class JobService{
GetAllJobs(){
return axios.get(Job_Baseurl+"/GetAllJobs");
}
Addjob(job){
return axios.post(Job_Baseurl+"/AddJob",job);
}
GetJobById(id){
return axios.get(Job_Baseurl+"/GetJobById?id="+id);
}
UpdateJob(id, job){
return axios.put(Job_Baseurl+"/UpdateJob?id="+id,job);
}
DeleteJob(id)
{
return axios.delete(Job_Baseurl+"/DeleteJob?id="+id);
}
AddInterview(job){
return axios.post(Job_Baseurl+"/AddInterviewLevel",job);
}
GetInterviewLevelById(id){
return axios.get(Job_Baseurl+"/GetInterviewLevelById?id="+id);
}
UpdateInterviewLevel(id,level){
return axios.put(Job_Baseurl+"/UpdateInterviewLevel?id="+id,level);
}
GetAllInterviewLevels(){
return axios.get(Job_Baseurl+"/GetAllInterviewLevels");
}
DeleteInterviewLevel(id)
{
return axios.delete(Job_Baseurl+"/DeleteInterviewLevel?id="+id);
}
}
export default new JobService()
ViewLevel.js
import React, { Component } from "react";
import Sidebar from '../Sidebar';
import JobService from "../../Services/JobService";
import '../css/View.css';
import {toast} from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import { Link } from "react-router-dom";
import { confirmAlert } from 'react-confirm-alert'; // Import
import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css
class ViewLevel extends React.Component{
constructor(props){
super(props)
this.state={
levels:[],
currentPage:1,
jobsPerPage:5
}
this.addLevel=this.addLevel.bind(this);
this.editLevel=this.editLevel.bind(this);
this.deleteLevel=this.deleteLevel.bind(this);
this.deleteButton=this.deleteButton.bind(this);
this.searchItems=this.searchItems.bind(this);
}
deleteButton(id)
{
confirmAlert({
title:'Delete Confirmation',
message:'Are you sure you want to delete this ?',
buttons:[
{
label:'Delete',
className:'but1',
onClick:()=> this.deleteLevel(id)
},
{
label:'Cancel',
onClick:()=>window.location='/viewlevel'
}
]
});
}
deleteLevel(id){
JobService.DeleteInterviewLevel(id).then(res=>{
this.setState({levels:this.state.levels.filter(level=>level.id!==id)});
});
window.location='/viewlevel';
localStorage.setItem('Deletestatus',true);
}
editLevel(id){
localStorage.setItem('userid',id);
window.location=`/updatelevel/${id}`;
}
addLevel(){
window.location="/interview";
}
displayToast=()=>{
if(localStorage.getItem('Deletestatus')) {
toast('Deleted Successfully',{
position:toast.POSITION.BOTTOM_CENTER,
type:toast.TYPE.SUCCESS,
toastId:'del'
})
}
if(localStorage.getItem('Resgisterstatus')) {
toast('Added Successfully',{
position:toast.POSITION.BOTTOM_CENTER,
type:toast.TYPE.SUCCESS,
toastId:'add',
})
}
if(localStorage.getItem('Updatestatus')) {
toast('Updated Successfully ',{
position:toast.POSITION.BOTTOM_CENTER,
type:toast.TYPE.SUCCESS,
toastId:'update',
})
}
}
clearData=()=>{
localStorage.removeItem('Resgisterstatus');
localStorage.removeItem('Deletestatus');
localStorage.removeItem('Updatestatus');
}
componentDidMount(){
JobService.GetAllInterviewLevels().then((res)=>{
this.setState({levels:res.data});
this.displayToast();
this.clearData();
});
}
searchItems=(event)=>{
let searchval=event.target.value.toLowerCase();
let res=this.state.levels.filter(level=>{
return(((level.id.toString()).indexOf(searchval)!==-1)||
((level.level.toLowerCase()).indexOf(searchval)!==-1)||
((level.levelDes.toLowerCase()).indexOf(searchval)!==-1))
})
if(res==""||searchval==""){
if(res==""){
toast("Searched value not found",
{
position:toast.POSITION.BOTTOM_CENTER,
type: toast.TYPE.WARNING,
toastId:'search',
autoClose:1000,
onClose:function(){
window.location.reload();
}
})
}
else{
window.location.reload();
}
}
else{
this.setState({
levels:res
})
}
}
render(){
const indexOfLastEmpolyee=this.state.currentPage * this.state.jobsPerPage;
const indexOfFirstEmployee=indexOfLastEmpolyee-this.state.jobsPerPage;
const currentEmployees=this.state.levels.slice(indexOfFirstEmployee,indexOfLastEmpolyee);
const pageNumbers=[];
for(let i=1;i<=Math.ceil(this.state.levels.length/this.state.jobsPerPage);i++){
pageNumbers.push(i);
}
const setPage=(pageNum)=>{
this.setState({currentPage:pageNum})
}
return(
<div className="container">
<div class="side">
<Sidebar />
</div>
<div className="addbtn">
{/* <button className="add" onClick={this.addJob}>Add Job</button> */}
<button className="btn btn-outline-success" type="submit" onClick={()=>{window.location='/interview'}}>Add Interview Level</button>
</div>
{/*
<div className="searchbtn">
<input type="text" placeholder="Search here" onChange={(e)=>this.searchItems(e)}/>
</div>
*/}
.
<br></br>
<br></br>
<br></br>
<h3>Interview Level Details</h3>
<br></br>
<table className="table">
<thead className="dark">
<tr>
<th>Level</th>
<th>Description</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
{
currentEmployees.map(items=>(
<tr key={items.id}>
<td>{items.level}</td>
<td>{items.levelDes}</td>
<td><button className="btn btn-primary" onClick={()=>this.editLevel(items.id)}>Edit</button></td>
<td><button className="btn btn-danger" onClick={()=>this.deleteButton(items.id)}>Delete</button></td>
</tr>
))}
</tbody>
</table>
<div className="pagination">
{
pageNumbers.map((pageNum,index)=>(
<span key={index} onClick={()=>{setPage(pageNum)}}>
{pageNum}
</span>
))
}
</div>
</div>
)
}
}
export default ViewLevel
When I am clicking the edit button in ViewLevel.js the values doesn't get populated onto the input boxes and I am getting an error like this in console:
GET https://localhost:44348/api/Jobs/GetInterviewLevelById?id=null 404
Uncaught (in promise) AxiosError {message: 'Request failed with status code 404', name:
'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
code: "ERR_BAD_REQUEST"
Thanks in advance.