How to Set the Loading State Only on a Specific Clicked Button in React
6 months ago
admin
Reactjs
In this lesson, we will see how to set the loading state only on a specific clicked button in React, let's assume that we are fetching a list of users from the database and we want to set the loading state when clicking on a specific user.
Add loading object to the state
First, let's add the loading object to the state, the loading object has two properties the id and the status.
const [loading, setLoading] = useState({id: null, status: false});
Adding the method
Next, let's add the method to set the loading state.
const setLoading = (user_id) => {
setLoading({
...loading,
id: user_id,
status: true
});
}
Adding the button
Now, let's loop through users and add the button, once clicked we will set the loading state only for the clicked button.
{
users?.map(user => (
<button
onClick={() => setLoading(user.id)}
className="btn btn-sm btn-danger text-capitalize">
Click here
</button>
))
}