I am following this tutorial and I've run across a problem. The client list will not display on the webpage like the following image (it just states client):
This is the code that displays it:
class App extends Component {
state = {
clients: []
};
async componentDidMount() {
const response = await fetch('/clients');
const body = await response.json();
this.setState({clients: body});
}
render() {
const {clients} = this.state;
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<div className="App-intro">
<h2>Clients</h2>
{clients.map(client =>
<div key={client.id}>
{client.name} ({client.email})
</div>
)}
</div>
</header>
</div>
);
}
}
export default App;
I was wondering how I could try to debug the react code to display the client list.
At first, I had trouble generating clients, so I assumed that was the problem. I am able to generate clients, the problem is simply displaying them.