why is console logging this is undefined with react? - reactjs

Question

I recently came back to coding and I'm trying learn react on udemy. this code should fetch json files from a website and console.log them. instead I'm getting a this is undefined error.how do I get it to correctly log the information from the fetched website and remove this is undefined error?
import {Component} from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component() {
constructor(){
super();
this.state ={
monsters:[],
};
}
componentDidMount(){
fetch('https://jsonplaceholder.typicode.com/users').then((response)=>response.json()).then((users)=>console.log(users));
}
render(){
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}}
export default App;

Answer 1

Try this, We can use function component and hooks nowadays because it is easy to use and redable to others.
import React, { useEffect } from 'react';
const App = () => {
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/users')
.then((response)=>response.json())
.then((users)=>console.log(users));
}, []);
return (
<div className='App'>
<h1>Hello React.</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
export default App;