React component fails to render due to undefined property - reactjs

Question

I'm a newbie to react, I'm using the create-react-app package, and express generator. I can't seem to be able to render the react component due to undefined property, which I can't see to understand why is it undefined? Here is my code:
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import PageContent from './App';
import * as serviceWorker from './serviceWorker';
const pageContent = new PageContent();
ReactDOM.render(
<React.StrictMode>
<pageContent.App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();
App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
class PageContent extends React.Component {
constructor(props) {
super(props)
this.state = {
apiResponse: 'test test test'
};
}
callAPI() {
fetch("http://localhost:3127/testAPI")
.then(res => res.text())
.then(res => this.setState({ apiResponse: 'hello' }));
}
componentWillMount() {
this.callAPI();
}
App() {
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>
<p className="App-intro">**{PageContent.state.apiResponse}</p>
</header>
</div>
);
}
}
export default PageContent;
This is the error I get:
TypeError: Cannot read property 'apiResponse' of undefined
App
src/App.js:39
36 | >
37 | Learn React
38 | </a>
> 39 | <p className="App-intro">**{PageContent.state.apiResponse}</p>
40 | ^ </header>
41 | </div>
42 | );
Thanks everyone for the help

Answer 1

You want to use:
{this.state.apiResponse}
Edit: I noticed you're rendering the App method directly after creating an instance of the PageContent class. You don't need to do this. You can simply rename the App() method to be render(), then remove the const pageContent = new PageContent(); and you can then render <PageContent /> instead of <pageContent.App />.

Answer 2

You are making 2 mistakes -
first write it as {this.state.apiResponse}
Your app.js file is not written properly, It should be something like this
import React from 'react';
import logo from './logo.svg';
import './App.css';
export default class PageContent extends React.Component {
constructor(props) {
super(props)
this.state = {
apiResponse: 'test test test'
};
}
callAPI() {
fetch("http://localhost:3127/testAPI")
.then(res => res.text())
.then(res => this.setState({ apiResponse: 'hello' }));
}
componentWillMount() {
this.callAPI();
}
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>
<p className="App-intro">{this.state.apiResponse}</p>
</header>
</div>
);
}
}
after this import this PageContent in your index.js like this -
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import PageContent from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<PageContent />
</React.StrictMode>,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();