Can not get the data response - reactjs

Question

I am trying to get some data to my state from a fake online rest api, the problem is the data is not getting to the state properly, so it's not showing up.
I have tried to change the state to array or just like this firstName: '',
... and it still won't work
import React, { Component } from 'react';
import axios from 'axios';
class Success extends Component {
state = {
firstName: [],
username: [],
email: [],
id: [],
show: false
};
componentDidMount() {
axios
.get('https://jsonplaceholder.typicode.com/users')
.then(res => this.setState({ firstName: res.data.name }));
}
onClick = () => {
this.setState(prevState => ({ show: !prevState.show }));
};
render() {
return (
<div>
<h1
className="font-weight-light"
style={{
color: 'black',
marginTop: '50px'
}}
>
UserList:
</h1>
<div className="mt-5">
<ul className="list-group">
<li className="list-group-item">
{this.state.firstName}
<div
className="fas fa-angle-down"
style={{ marginLeft: '98%' }}
onClick={this.onClick}
/>
</li>
{this.state.show === true ? (
<li className="list-group-item">
Username: {this.state.username}
</li>
) : null}
{this.state.show === true ? (
<li className="list-group-item">Email: {this.state.email}</li>
) : null}
{this.state.show === true ? (
<li className="list-group-item">ID: {this.state.id}</li>
) : null}
</ul>
</div>
</div>
);
}
}
export default Success;
I want to get that data in the state and show up.

Answer 1

Are you sure that res.data.name exists?
It seems that res.data returns array.
You should declare users state with null, and set users state to res.data.
After that, you can use Array.prototype.map with res.data
For example,
state = {
users: null,
whatever: ''
}
componentDidMount() {
axios
.get('https://jsonplaceholder.typicode.com/users')
.then(res => this.setState({
users: res.data
}));
}
...
// write function that takes id as parameter.
this.state.users.map(item => {
if(item.id === id){
this.setState({
whatever: item.name
})
} return item;
})