ReferenceError: Component is not defined in ReactJs

Dung Do Tien May 22 2022 39

Hello Guys, I am a newbie in Reactjs, I have an API that will return a list of articles and I have to call it. I created a class that extends from Component. I wrote as below:

import * as React from 'react';
import axios from 'axios';

export default class News extends Component {
  constructor(props) {
    super(props);

    this.state = {
      news: [],
    };
  }

  componentDidMount() {
     axios.get('https://hn.algolia.com/api/v1/search?query=react')
          .then((result) =>
            this.setState({
              news: result.data.hits,
            })
          );
  }

  render() {
    return (
      <ul>
        {this.state.news.map((topic) => (
          <li key={topic.objectID}>{topic.title}</li>
        ))}
      </ul>
    );
  }
}

But when running code I got an exception throw ReferenceError: Component is not defined.

ReferenceError: Component is not defined
    at Object.eval (News.tsx:27:20)
    at eval (News.tsx:46:4)
    at eval (News.tsx:47:3)
    at eval (<anonymous>)
    at Qt (webcontainer.c9006c026a6ec2f367c529f2271e490b26e863f1.js:15:30145)
    at webcontainer.c9006c026a6ec2f367c529f2271e490b26e863f1.js:15:38799
    at U (webcontainer.c9006c026a6ec2f367c529f2271e490b26e863f1.js:15:13565)
    at webcontainer.c9006c026a6ec2f367c529f2271e490b26e863f1.js:15:13207
    at Object.eval (index.tsx:28:32)
    at eval (index.tsx:34:4)

How can I fix this issue?

I really appreciate any help you can provide.

Have 1 answer(s) found.
  • 2

    20, viii-c Aryan SINGH May 22 2022

    You're wrong a bit. Please change Component to React.Component.

    //Change from :
    export default class News extends Component {
    
    // To
    export default class News extends React.Component {

    Or you can change the way you import React module as below:

    //Change from :
    import * as React from 'react';
    
    // To
    import React, {Component} from "react";

    I hope this answer is useful for you.

Leave An Answer
* NOTE: You need Login before leave an answer

* Type maximum 2000 characters.

* All comments have to wait approved before display.

* Please polite comment and respect questions and answers of others.

Popular Tips

X Close