CODEWITHSUNDEEP
reactjs
Faouzitam
Faouzitam

Reputation: 81

React JS Error: 'Component' is not defined

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

Upvotes: 1

Views: 4630

Answers (2)

Faouzitam
Faouzitam

Reputation: 81

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;

Upvotes: 1

ROOT
ROOT

Reputation: 11622

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;

Upvotes: 5

Related Questions