React JS Error: 'Component' is not defined

Question

I am beginner in ReactJS, I prepared the below files:

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

class ListCoursesComponent extends Component {
  render() {
    return (
      <div className="container">
        <h3>All Courses</h3>
        <div className="container">
          <table className="table">
            <thead>
              <tr>
                <th>Id</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>Learn Full stack with Spring Boot and Angular</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}

InstructorApp.jsx

class InstructorApp extends Component {
  render() {
    return (
      <>
        <h1>Instructor Application</h1>
        <ListCoursesComponent />
      </>
    );
  }
}

export default InstructorApp;

When I am compiling the code, I am getting the below error :

Failed to compile

./src/component/InstructorApp.jsx

Line 1:29: 'Component' is not defined no-undef Line 4:7: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 5:9: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 6:9: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 6:10: 'ListCoursesComponent' is not defined react/jsx-no-undef

Search for the keywords to learn more about each error.

Please if someone can help me it will be greet.

Thanks

Whenever you write jsx, you need React in scope; meaning you need to `import React from "react"` — Agney, Feb 13 '20 at 18:42
Does this answer your question? ['React' must be in scope when using JSX react/react-in-jsx-scope?](https://stackoverflow.com/questions/42640636/react-must-be-in-scope-when-using-jsx-react-react-in-jsx-scope) — Henry Woody, Oct 24 '22 at 21:19

ROOT · Answer 1 · 2020-02-13T19:07:00.287

5

You missed to import Component from react in InstructorApp and ListCoursesComponent components as mentioned in the error you got also the other components should be imported too from their location, your components should be like this:

import React, { Component } from "react";
import ListCoursesComponent from './ListCoursesComponent.jsx';

class InstructorApp extends Component {
  render() {
    return (
      <>
        <h1>Instructor Application</h1>
        <ListCoursesComponent />
      </>
    );
  }
}
export default InstructorApp;

also in ListCoursesComponent you missed the import React, Component and the export statement:

import React, { Component } from "react";

class ListCoursesComponent extends Component {
  render() {
    return (
      <div className="container">
        <h3>All Courses</h3>
        <div className="container">
          <table className="table">
            <thead>
              <tr>
                <th>Id</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>Learn Full stack with Spring Boot and Angular</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}

export default ListCoursesComponent;

edited Feb 13 '20 at 19:07

answered Feb 13 '20 at 18:44

ROOT

11,363
5
30
45

Thanks for your reply, i tested your suggestion and i get the below error: ``` ./src/component/InstructorApp.jsx Line 8:10: 'ListCoursesComponent' is not defined react/jsx-no-undef Search for the keywords to learn more about each error. ``` – Faouzitam Feb 13 '20 at 18:49
I updated as you suggested, but still having the same error: ./src/component/InstructorApp.jsx Line 8:10: 'ListCoursesComponent' is not defined react/jsx-no-undef Search for the keywords to learn more about each error. – Faouzitam Feb 13 '20 at 19:03
Just noticed the issue, you are not also importing `ListCoursesComponent` component inside `InstructorApp` **Note: that you should change the import based on the location of `ListCoursesComponent` location.** – ROOT Feb 13 '20 at 19:08
i made the change which you mentioned, now i have this error: ./src/component/InstructorApp.jsx Module not found: Can't resolve './component/ListCoursesComponent' in 'C:\Users\etamfao\frontend-spring-boot-react-crud-full-stack-with-maven\src\component' – Faouzitam Feb 13 '20 at 20:43
now it is working, i add another "." as you can see below: import ListCoursesComponent from "../component/ListCoursesComponent"; – Faouzitam Feb 13 '20 at 20:51

score 1 · Answer 2 · answered Feb 13 '20 at 20:56

The Final solution was: In the file : 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;

React JS Error: 'Component' is not defined

2 Answers2