I have 3 buttons which are rendered from a loop over an array and rendered in react.
The 3 buttons are represented in a state as follows:
const [buttonLoading, setButtonLoading] = UseSafeState({
free: { is_loading: false },
starter: { is_loading: false },
professional: { is_loading: false },
})
(UseSafeState is just a hook component that do exactly the same thing as useState, but safely)
I would like that by clicking on one of the buttons, a loader is displayed on this specific button while waiting for the end of a request.
I created this test component to shorten my code and test. What I'm trying to do here is display the loader on the button that is clicked relative to its name.
export default function Test() {
const [buttonLoading, setButtonLoading] = UseSafeState({
free: { is_loading: false },
starter: { is_loading: false },
professional: { is_loading: false },
})
// To set the is_loading property of the specific key of the json state
const changeButtonLoading = (type, isLoading) => {
const buttonLoadingChanged = buttonLoading
buttonLoadingChanged[type].is_loading = isLoading
setButtonLoading(buttonLoadingChanged)
}
const BUTTONS = [
{ name: 'free', label: 'FREE' },
{ name: 'starter', label: 'STARTER' },
{ name: 'professional', label: 'PROFESIONAL' },
]
return BUTTONS.map((button, key) => {
return (
<Button key={key} onClick={() => changeButtonLoading(button.name, true)}>
{buttonLoading[button.name].is_loading ? <LoaderButton /> : button.label}
</Button>
)
})
}
(LoaderButton /> component is just a basic loader with some css and html)
But the problem is that when I click on one of the button, he don't display the loader. But he display it if I modify something in my code to force a render.
const changeButtonLoading = (type, isLoading) => {
setButtonLoading(prev => {
return {
...prev,
[type] : {is_loading : isLoading}
}
})
};