Using Reactjs to show Json response data on each form submission - reactjs

Question

How can I use Reactjs list records response on each form submission.
I have searched for previous post on this on stackoverflow but most solution I found does not address my issue.
The code below works but only list one record or
replace already existing displayed data on each form submission.
Here is what I want to achieve.
If I submit form 4 times am supposed to have 4 records displayed
For Instance
uid filename
1 macofile
2 johnfile
3 lukefile
4 tonyfile
But what this code does is to replace already existing record on each form submission and
as a result, it only show just one records
Eg. on 4th form submission it shows only
4 tonyfile
In angularjs I use something like push function to actualize my goal as per code below
$scope.users.push(res.data[0]);
In reactjs if I try the code below
const users = users.push(res.data);
//const users = users.push(res.data[0]);
it will show error
Cannot read property 'push' of undefined
Here is the 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 => {
//const users = res.data;
//const users = users.push(res.data[0]);
const users = users.push(res.data);
this.setState({ users, loading: false });
/*
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>
<ul>
{this.state.users.map((user, index) =>
<option key={user.uid} value='{ user.uid }' > { user.uid } { user.filename}</option>
)}
</ul>
</div>
);
}
}

Answer 1

because the local user is not defined as an array to have .push() function.
const users=this.state.users;
users.push(res.data) then you can replace it with the users in the state.

Answer 2

what works for me is the concat functions as per code below
const users=this.state.users.concat(res.data);
// const users=this.state.users.push(res.data);// does not work.
Consequently, push() does not work because it returns the length of the extended array, instead of the array itself.
Thanks