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
– Agney, Commented Feb 13, 2020 at 18:42
Does this answer your question? 'React' must be in scope when using JSX react/react-in-jsx-scope? — Henry
– Henry, Commented Oct 24, 2022 at 21:19

ROOT · Accepted Answer · 2020-02-13 19:07:00Z

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, 2020 at 19:07

answered Feb 13, 2020 at 18:44

ROOT

11.7k5 gold badges35 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Faouzitam Over a year ago

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 Over a year ago

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.

ROOT Over a year ago

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.

Faouzitam Over a year ago

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 Over a year ago

now it is working, i add another "." as you can see below: import ListCoursesComponent from "../component/ListCoursesComponent";

Faouzitam · Accepted Answer · 2020-02-13 20:56:19Z

1

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;

answered Feb 13, 2020 at 20:56

Faouzitam

812 silver badges10 bronze badges

Collectives™ on Stack Overflow

React JS Error: 'Component' is not defined

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related