React: Fake api's axios delete does not work - reactjs

Question

I am practicing REST API by using one Fake API site. For front-end, I am using React. I successfully login the email and password by using Fake API's login and redirect to list users, where I fetched the data from Fake API and shows the user's name, image. I used the delete button where I can delete the user. I used the Axios delete method but the button does not do anything.
This is the component
import React, { useState, useEffect } from "react";
import axios from "axios";
import { NavLink } from "react-router-dom";
function Users() {
const [state, setState] = useState([]);
useEffect(() => {
fetchingData();
}, []);
const removeData = id => { //THIS IS WHERE I USED THE AXIOS DELETE METHOD
axios
.delete(`https://reqres.in/api/users/${id}`)
.then(res => console.log(res))
.catch(err => console.log(err));
};
const fetchingData = () => {
axios
.get("https://reqres.in/api/users")
.then(response => {
setState(response.data.data);
})
.catch(err => console.log(err));
};
return (
<div>
<div className="col s12 m7">
<h2 className="header">Users</h2>
{state.map(userlist => {
return (
<div className="card horizontal" key={userlist.id}>
<div className="card-image">
<img src={userlist.avatar} alt="images" />
</div>
<div className="card-stacked">
<div className="card-content">
<p>
Name: {userlist.first_name} {userlist.last_name}
</p>
<p>Email: {userlist.email}</p>
</div>
<div className="card-action">
<button
className="btn delete"
onClick={() => removeData !== userlist.id} // THIS IS WHERE I USED THE DELETE LOGIC.
>
Delete
</button>
<NavLink
exact
to={`/api/users/${userlist.id}`}
className="btn edit"
>
Edit
</NavLink>
</div>
</div>
</div>
);
})}
</div>
</div>
);
}
export default Users;

Answer 1

In your delete button's onClick prop, you should pass the id as an argument.
const removeData = async id => {
console.log("ID", id);
try {
const response = await axios.delete(`https://reqres.in/api/users/${id}`);
console.log(response);
fetchingData();
} catch (error) {
console.log(error);
}
};
<button
className="btn delete"
onClick={() => removeData(userlist.id)} // THIS IS WHERE I USED THE DELETE LOGIC.
>
Delete
</button>;