Reactjs hooks set active buttons - reactjs

Question

I have this buttons from my backend
const ShiftCalendar = btn => {
console.log('btn ->', btn);
};
btnList.map((btn,i) => {
const is_active = btn.is_default ? 'is_active' : '';
return (
<Button
key={i}
variant="dark mt-3 mr-3 "
className={is_active}
size="sm"
onClick={() => ShiftCalendar(btn)}
>
{btn.title}
</Button>
);
})
How can I change active button by onclick event?
As you can See my button 1 has an is_active class, What I want is to change active by onclick of button. if i click button 2 button 1 will no longer have a is_active class while button 2 will have is_active class
Check button image here
BTW im using hooks not component.
THanks

Answer 1

Think of it this way. When we click on a button, we want to remember what button was clicked then when we rerender the page, lets mark the last clicked button as active and other not active.
So to do that in React, what you'd do is:
Firstly get the isDefault button from the array of buttons (either coming from an API, props or some constants) and store it as the default value in your state for the first render. If you don't have this key isDefault you can gracefully skip this step by making none of the buttons active or make the first active, whichever best suits your use case.
onClick of a button, call a function that you should take the clicked buttonId and save it in state.
Then on next render to determine which button is active by comparing the buttonId with what you stored in the state. If it matches then the className should be active, else any other classname you want.
import React, { useState } from 'react';
const btnList = [
{
id: 1,
title: 'Button 1',
isDefault: true,
},
{
id: 2,
title: 'Button 2',
isDefault: false,
}
];
const ButtonList = props => {
// 1. Get the default so we could set it in the state
const [defaultBtn] = btnList.some(btn => btn.isDefault === true);
const [activeButtonId, setActiveButtonId] = useState(defaultBtn ? defaultBtn.id : null);
// 2. Create an event handler so when we click on a button we save the buttonId in state
const handleButtonClick = event => {
setActiveButtonId(Number(event.target.value));
};
return (
<div>
{btnList.map(btn => (
<Button
key={btn.id}
variant="dark mt-3 mr-3 "
className={btn.id === activeButtonId ? 'is_active' : ''}// Compare the button's id to what we have in state to determine which should be active
size="sm"
value={btn.id} // Set the value of the button as the button's id
onClick={handleButtonClick}
>
{btn.title}
</Button>
))}
</div>
)
}
export default ButtonList;