How do i reuse a state? - reactjs

Question

I'm new to React.js.
and I tried to use a function that has boolean, and I want to reuse just one function to another button.
so I tried like this:
function App() {
const [show, setShow] = useState(false);
const [show1, setShow1] = useState(false);
const [show2, setShow2] = useState(false);
const handleOnClick = () => {
setShow(true);
setShow1(false);
setShow2(false);
};
const handleOnClick1 = () => {
setShow1(true);
setShow(false);
setShow2(false);
};
const handleOnClick2 = () => {
setShow2(true);
setShow(false);
setShow1(false);
};
const panels = ["1+3", "2+2", "3+1"];
const getPanel = e => {
switch (e) {
case "1+3":
handleOnClick();
break;
case "2+2":
handleOnClick1();
break;
case "3+1":
handleOnClick2();
break;
default:
break;
}
};
const panelList = panels.map(panel => (
<div onClick={() => getPanel(panel)}>
<h1>Panel{panel}</h1>
</div>
));
return (
<div>
<Main>{panelList}</Main>
{show && <One />}
{show1 && <Two />}
{show2 && <Three />}
</div>
the question is
How can i use one useState instead of making another one ??

Answer 1

If you're always just going to have one button showing, you can go ahead and just maintain the ID of that button in state rather than a bunch of boolean states.
Furthermore, it might be nice to make just one click handler. You could do this a bunch of ways, such as using the clicked button's ID, or you could do a higher-order function and pass the clicked ID directly. Here is the latter approach:
function App() {
const [show, setShow] = useState();
const handleOnClick = (id) => () => {
setShow(id);
}
return (
<>
<button onClick={handleClick(1)}>Show 1</button>
<button onClick={handleClick(2)}>Show 2</button>
<button onClick={handleClick(3)}>Show 3</button>
{show === 1 && <One />}
{show === 2 && <Two />}
{show === 3 && <Three />}
</>
);
}