React const is not defined no-undef error - reactjs

Question

I am following a tutorial to learn ReactJS, i am trying to create Spring Boot and React Java Full Stack Application with Maven.
Below are the files which i created:
App.js
import React, { Component } from "react";
import "./App.css";
import InstructorApp from "./component/InstructorApp";
class App extends Component {
render() {
return (
<div className="container">
<InstructorApp />
</div>
);
}
}
export default App;
ListCoursesComponent.jsx:
import React, { Component } from "react";
import CourseDataService from "../service/CourseDataService";
class ListCoursesComponent extends Component {
constructor(props) {
super(props);
this.refreshCourses = this.refreshCourses.bind(this);
}
componentDidMount() {
this.refreshCourses();
}
refreshCourses() {
CourseDataService.retrieveAllCourses(INSTRUCTOR) //HARDCODED
.then(response => {
console.log(response);
});
}
}
export default ListCoursesComponent;
InstructorApp.jsx:
import React, { Component } from "react";
import ListCoursesComponent from "../component/ListCoursesComponent";
class InstructorApp extends Component {
render() {
return (
<>
<h1>Instructor Application</h1>
<ListCoursesComponent />
</>
);
}
}
export default InstructorApp;
CourseDataService.js:
import axios from "axios";
const INSTRUCTOR = "in28minutes";
const COURSE_API_URL = "http://localhost:8080";
const INSTRUCTOR_API_URL = `${COURSE_API_URL}/instructors/${INSTRUCTOR}`;
class CourseDataService {
retrieveAllCourses(name) {
return axios.get(`${INSTRUCTOR_API_URL}/courses`);
}
}
export default new CourseDataService();
When i am lunching my application, in the tutorial i am supposed to get the below error:
[Error] Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin.
[Error] XMLHttpRequest cannot load http://localhost:8080/instructors/in28minutes/courses due to access control checks.
[Error] Failed to load resource: Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin. (courses, line 0)
[Error] Unhandled Promise Rejection: Error: Network Error
(anonymous function) (0.chunk.js:1097)
promiseReactionJob
But when i am lunching my application i am getting this error:
./src/component/ListCoursesComponent.jsx
Line 15:42: 'INSTRUCTOR' is not defined no-undef
Search for the keywords to learn more about each error.

Answer 1

The unhandled promise rejection means that at some point the request was made to call your url, but it was denied, this is probably because you need to activate CORS into your project. You can read more about CORS and adding it to your project here.

Answer 2

You declared INSTRUCTOR in ListCoursesComponent.jsx but you are trying to use it in a different file. If you want to do this you need to export it where you define it and import it in the file you are using it.

Answer 3

Solution:
As mentioned by #emoore i have added the CORS in my springboot backed application by:
#CrossOrigin(origins = { "http://localhost:3000", "http://localhost:4200" })
#RestController
As mentioned by #trixn i imported INSTRUCTOR Const in the ListCoursesComponent file by:
import INSTRUCTOR from "../service/CourseDataService";