Only one active button in React - reactjs

Question

I have a list of buttons. I want to make one of them to have a active state and when that one has every other shouldn't have that state. So styling is applied only to the active one. I almost did it, i mean it change styling when i press on each other but i have no idea how to make it to deactivate a button when i click on another one.
Bellow is my code. props.planets is array of object {id: 'name', title: 'name'}
MenuList it takes a props.planets and generate list of MenuButton components
const MenuList = (props) => {
return (
<ul className={classes.planet_list}>
{props.planets.map((planet) => (
<MenuButton key={planet.id} title={planet.title} />
))}
</ul>
);
};
MenuButton is my button component i want it to have module classes: modulebutton as a main styling, class based on title, and an active class if button is active
const MenuButton = (props) => {
const [active, setActive] = useState();
const clickHandler = () => {
setActive({ active: props.title });
};
return (
<li>
<div
className={`${classes.menubutton} ${classes[props.title]} ${
active && classes.active
}`}
onClick={clickHandler}
>
{props.title}
</div>
</li>
);
};

Answer 1

One of the easiest solution for an active state on button. For this purpose you need to have an active state. I hope this would help you!
const {useState,Fragment} = React;
const App = () => {
const [active, setActive] = useState("");
const handleClick = (event) => {
setActive(event.target.id);
}
return (
<Fragment>
<button
key={1}
className={active === "1" ? "active" : undefined}
id={"1"}
onClick={handleClick}
>
Solution
</button>
<button
key={2}
className={active === "2" ? "active" : undefined}
id={"2"}
onClick={handleClick}
>
By
</button>
<button
key={3}
className={active === "3" ? "active" : undefined}
id={"3"}
onClick={handleClick}
>
Jamal
</button>
</Fragment>
);
}
ReactDOM.render(
<App/>,
document.getElementById("react")
);
.active{
background-color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Answer 2

You need to have the active state in the parent not in the child component
MenuList.js
const MenuList = (props) => {
const [active, setActive] = useState();
function activeButton(value){
setActive(value)
}
return (
<ul className={classes.planet_list}>
{props.planets.map((planet) => (
<MenuButton onChange={activeButton} disabled={active} key={planet.id} title={planet.title} />
))}
</ul>
);
};
MenuButton.js
const MenuButton = (props) => {
const clickHandler = (keyID) => {
props.onChange(keyID)
};
return (
<li>
<div
className={props.active === props.key ? "activeClass" : "inactiveClass"}
onClick={() => clickHandler(props.key)}
>
{props.title}
</div>
</li>
);
};
That should be it. May need a useEffect but let me know of any bugs