Reactjs displays error users.map is not a function - reactjs

Question

I am getting the following error in my React application:
users.map is not a function
I have tried many solutions posted on Stack Overflow but it does not seems to solve my issue.
I used the code below to submit a filename and it works fine. Here is my problem. Each time i click on submit button, i
want to display a JSON data from the backend in a succession (For Instance If I submit form 3 times, I need to have 3 records of JSON data showed).
Here is the sample of JSON:
{"filename":"macofile","message":"success","uid":"20"}
To this effect I have set the following line of code in the Axios Post response
this.setState({
users: res.data,
loading: false,
});
I have also tried
users: res
or
users.push(res.data);
This is my code:
import React, { Component } from "react";
import axios, { post } from "axios";
class FilePage extends React.Component {
constructor(props) {
super(props);
this.state = {
value: "",
filename: "",
loading: false,
users: [],
error: null
};
this.handleChange = this.handleChange.bind(this);
}
_handleSubmit(e) {
e.preventDefault();
//send it as form data
const formData = new FormData();
formData.append("filename", this.state.filename);
//alert(this.state.filename);
this.setState({ loading: true }, () => {
axios
.post("http://localhost/apidb_react/up.php", formData)
.then(res => {
this.setState({
users: res.data,
loading: false
});
})
.catch(err => {
console.log(err.message);
});
});
}
// handle form submission
handleChange(event) {
this.setState({ [event.target.name]: event.target.value });
}
render() {
const { loading, users, error } = this.state;
return (
<div>
<form onSubmit={e => this._handleSubmit(e)}>
<b>filename:</b>
<input
tyle="text"
className="form-control"
value={this.state.filename}
name="filename"
onChange={this.handleChange}
/>
<button
className="submitButton"
type="submit"
onClick={e => this._handleSubmit(e)}
>
submit
</button>
</form>
<React.Fragment>
<h3>Display Data each time record is submitted</h3>
{error ? <p>{error.message}</p> : null}
{!loading ? (
users.map(user => {
const { filename, message, uid } = user;
return (
<div key={uid}>
<p>Userid: {uid}</p>
<p>File Name: {filename}</p>
<p>Message: {message}</p>
<hr />
</div>
);
})
) : (
<h3>Loading...</h3>
)}
</React.Fragment>
</div>
);
}
}

Answer 1

Your res.data seems to be an object rather than an array -> {"filename":"macofile","message":"success","uid":"20"}. So, you will need to loop through the object by taking an array for eg:
Object.keys(users).map(key => console.log(users[key]))