React: loop through array response does not work - reactjs

Question

I run an axios get request to an Express server to get some dummy data:
customers = [
{ id: 1, firstName: "John" },
{ id: 2, firstName: "Brad" },
{ id: 3, firstName: "Mary" }
];
the data that is returned is determined by a user input: if the user enters "Brad", the result being returned will be { id: 2, firstName: "Brad" }.
For some reason, when I loop through the data returned, nothing works. Looking into the React Chrome Extension, the State returned is as follows:
{
"firstName": "Brad",
"id": 0,
"customers": [],
"res": []
}
Because I am learning React, I will post the whole component for you to see, perhaps the problem is something I don't see yet as a newbie:
class App extends Component {
constructor(props) {
super(props);
this.state = {
firstName: "",
id: 0,
customers: []
};
this.getName = this.getName.bind(this);
}
onChange = e => {
e.preventDefault();
this.setState({ firstName: e.target.value });
};
getName = e => {
e.preventDefault();
axios
.get("/api/customers", {
params: {
firstName: this.state.firstName
}
})
.then(res => {
console.log(res);
this.setState({ res: this.state.customers });
});
};
componentDidMount() {}
render() {
//if (!this.state.customers.length) return "Data not available yet";
return (
<div>
<h2>Customers</h2>
<div className="card card-body mb-4 p-4">
<div className="h1 display-4 text-center">
<h1 className="i fas">Search for a customer</h1>
<p className="lead text-center">Get the Customer's Name Here</p>
<form onSubmit={this.getName}>
<div className="form-group">
<input
type="text"
className="form-control form-control-lg"
placeholder="customer name ..."
name="firstName"
value={this.state.firstName}
onChange={this.onChange}
/>
</div>
<button
className="btn btn-primary btn-lg-block mb-5"
type="submit"
>
Get Customer
</button>
</form>
</div>
</div>
This is where I loop throuhg the data:
{this.state.customers.map(item => (
<li key={item.id}>{item.firstName}</li>
))}
</div>
);
}
}
And here is the Express route I'm calling:
app.get("/api/customers", (req, res) => {
let { firstName } = req.query;
const customers = [
{ id: 1, firstName: "John" },
{ id: 2, firstName: "Brad" },
{ id: 3, firstName: "Mary" }
];
console.log("the customer's name is " + firstName);
var str = customers.filter(x => x.firstName == firstName);
res.json(str);
});
So What I want is to display the data in a element below the input bar.

Answer 1

Try :
this.setState({ customers : res });
instead of :
this.setState({ res: this.state.customers });
Also, try to use React Hooks in order to refactor your code.