how to display a fetch result in a react app - reactjs

Question

I have a "Banner" object that I want to use to display my text and I made a button to toggle whether the message shows or is hidden:
function App() {
function Banner(props) {
if (!props.warn) {
return null;
}
return (
<div className="message">
{this.state.message}
</div>
);
}
class Page extends React.Component {
constructor(props) {
super(props);
this.state = {showMessage: false, message: 'foo'};
this.handleToggleClick = this.handleToggleClick.bind(this);
}
handleToggleClick() {
this.setState(state => ({
showMessage: !state.showMessage
}));
}
componentDidMount() {
fetch(
"https://jsonplaceholder.typicode.com/users")
.then((res) => res.json())
.then((json) => {
this.setState({
message: json,
DataisLoaded: true
});
})
}
render() {
return (
<div class="App">
<Banner warn={this.state.showMessage} />
<button onClick={this.handleToggleClick}>
{this.state.showMessage ? 'Hide' : 'Show'}
</button>
</div>
);
}
}
return (
<div className="App">
<Page />
</div>
);
}
export default App;
Why is the text of the message variable not the text in the banner? If I replace the {this.state.message} with a string literal the banner displays it, but as the code is now when I press the button the page clears. Any ideas?

Answer 1

You should pass data to Banner and with useEffect and useState get and update the data when it changes
const { useEffect, useState } = React;
function Banner(props) {
const [message, setMessage] = useState('');
useEffect(() => {
setMessage(props.message);
}, [props]);
if (!props.warn) {
return null;
}
return <div className="message">{JSON.stringify(message)}</div>;
}
class Page extends React.Component {
constructor(props) {
super(props);
this.state = {
showMessage: false,
message: 'foo',
};
this.handleToggleClick = this.handleToggleClick.bind(this);
}
handleToggleClick() {
this.setState((state) => ({
showMessage: !state.showMessage,
}));
}
componentDidMount() {
fetch('https://jsonplaceholder.typicode.com/users')
.then((res) => res.json())
.then((json) => {
this.setState({
message: json,
DataisLoaded: true,
});
});
}
render() {
return (
<div class="App">
<Banner message={this.state.message} warn={this.state.showMessage} />
<button onClick={this.handleToggleClick}>
{' '}
{this.state.showMessage ? 'Hide' : 'Show'}
</button>
</div>
);
}
}
function App() {
return (
<div className="App">
<Page />
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>