Disable button while processing. I need to do that to many buttons. Easy way exists?
Answered
Virginia's Warbler posted this in #help-forum
Virginia's WarblerOP
In my app, I got 10+ buttons, which I want to be disabled while it's processing.
I could use
But I wonder, is there a faster easier way?
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?
Answered by B33fb0n3
yea, when you using the buttons inside forms, that could be another approach as said: https://nextjs-forum.com/post/1324039196259647538#message-1324126234711556251
17 Replies
@Virginia's Warbler 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?
are all buttons rendered at the same time?
Asian black bear
A fieldset that is marked as disabled will disable all its children. So you could use that to propagate the state to buttons.
Virginia's WarblerOP
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@Virginia's Warbler Actually, those buttons are in different places and at diff times
then you can also use one loading state and every button uses it. Like:
Another approach would be if you use the buttons inside forms. Then you can [use the useActionState](https://react.dev/reference/react/useActionState). It contains an "isPending" parameter that will be updated when there is a pending Transition
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](https://react.dev/reference/react/useActionState). It contains an "isPending" parameter that will be updated when there is a pending Transition
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?
@Tibbs 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?
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
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 

@Tibbs 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 <:7529_KEKW:1293666790861307984>
you can share your public github link. If you have any issues with it, feel free to open your own thread π
Ok thank you. Gonna open my own thread, I'm still new to next js and never done this type of app before
@B33fb0n3 you can share your public github link. If you have any issues with it, feel free to open your own thread π
First of all, sorry to OP for spamming again, but I posted my thread if it would be possible to take a look please
@Tibbs First of all, sorry to OP for spamming again, but I posted my thread if it would be possible to take a look please
whenever I am able to help you, I will help you
@B33fb0n3 then you can also use one loading state and every button uses it. Like:
tsx
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](https://react.dev/reference/react/useActionState). It contains an "isPending" parameter that will be updated when there is a pending Transition
Virginia's WarblerOP
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@Virginia's Warbler Yea, I heard of the new `useActionState` hook`. Lemme explore if it can help me here
yea, when you using the buttons inside forms, that could be another approach as said: https://nextjs-forum.com/post/1324039196259647538#message-1324126234711556251
Answer