ReferenceError: Component is not defined in ReactJs
Dung Do Tien May 22 2022 381
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.
- 20
20, viii-c Aryan SINGH May 22 2022
You're wrong a bit. Please change
ComponenttoReact.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.
* Type maximum 2000 characters.
* All comments have to wait approved before display.
* Please polite comment and respect questions and answers of others.