How to Set the Loading State Only on a Specific Clicked Button in React

1 year 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.

show or hide the code

                                                    
                                                                                                                const [loading, setLoading] = useState({id: null, status: false});

Adding the method

Next, let's add the method to set the loading state.

show or hide the code

                                                        
                                                                                                                        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.

show or hide the code

                                                        
                                                                                                                        {
  users?.map(user => (
    <button 
      onClick={() => setLoading(user.id)}
      className="btn btn-sm btn-danger text-capitalize">
        Click here
     </button>
  ))
}