Disable button while processing. I need to do that to many buttons. Easy way exists?

[smoky thicket]

In my app, I got 10+ buttons, which I want to be disabled while it's processing.
I could use const [buttonOneProcessing, setButtonOneProcessing] = useState(false), and apply it +10x to all the various buttons.
But I wonder, is there a faster easier way?

[ornate plank]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[warm idol]

are all buttons rendered at the same time?

[torn zenith]

A fieldset that is marked as disabled will disable all its children. So you could use that to propagate the state to buttons.

[smoky thicket]

Actually, those buttons are in different places and at diff times

Any other ideas?

I know that jQuery have .one() https://www.w3schools.com/jquery/event_one.asp , to prevent multiple submissions once a button is pressed for processing. I wonder if something similar exists in react

[warm idol]

then you can also use one loading state and every button uses it. Like:

const [isLoading, setIsLoading] = useState(false)

return (
  <>
  <LoadingButton isLoading={isLoading}>First button</LoadingButton>
<LoadingButton isLoading={isLoading}>Second button</LoadingButton>
</>
)

Another approach would be if you use the buttons inside forms. Then you can use the useActionState. It contains an "isPending" parameter that will be updated when there is a pending Transition

[sullen drift]

I'm a bit of a noob but could you not use something like react context for the buttons and have the loading state there?

[warm idol]

yea, you can also pass the state thought a react context if the buttons are deeply nested somewhere. That would make things a lot easier. You are the only one who knows your project, so make sure you make a correct decision

[sullen drift]

I was having similar issues the other day with something and went for context for it, anyone here know how I can send invites from my app? I've tried sendgrid but I got skill issues

[warm idol]

you can share your public github link. If you have any issues with it, feel free to open your own thread 👍

[sullen drift]

Ok thank you. Gonna open my own thread, I'm still new to next js and never done this type of app before

[sullen drift]

First of all, sorry to OP for spamming again, but I posted my thread if it would be possible to take a look please

[warm idol]

whenever I am able to help you, I will help you

[smoky thicket]

Well, the thing is, those buttons are affected by different things. So they cant use the same state

Yea, I heard of the new useActionState hook`. Lemme explore if it can help me here

[warm idol]

yea, when you using the buttons inside forms, that could be another approach as said: #1324039196259647538 message

[ornate plank]

✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1324039196259647538 message)