reactjs - how do control the state for multiple component with one function

Question

I have one simple app that include 3 identical button and when I click the button, onClick event should trigger to display one span. for now, I have use one one state to control span show or not and once I click any one of button all span show. How can I implement the code, so when I click the button, only the correspond span display

import "./styles.css";
import React, { useState } from "react";

const Popup = (props) => {
  return <span {...props}>xxx</span>;
};

export default function App() {
  const [isOpen, setIsOpen] = useState(true);
  const handleOnClick = () => {
    setIsOpen(!isOpen);
  };
  return (
    <div className="App">
      <button onClick={handleOnClick}> Show popup1</button>
      <Popup hidden={isOpen} />
      <button onClick={handleOnClick}> Show popup2</button>
      <Popup hidden={isOpen} />
      <button onClick={handleOnClick}> Show popup3</button>
      <Popup hidden={isOpen} />
    </div>
  );
}

codesandbox: https://codesandbox.io/s/cocky-fermi-je8lr?file=/src/App.tsx

question from:https://stackoverflow.com/questions/66068017/how-do-control-the-state-for-multiple-component-with-one-function

Answer 1

You should rethink how the components are used. Since there is a repeating logic and interface, it should be separated to a different component.

const Popup = (props) => {
  return <span {...props}>xxx</span>;
};

interface Props {
  buttonText: string
  popupProps?: any
}

const PopupFC: React.FC<Props> = (props) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(!isOpen)}>{props.buttonText}</button>
      <Popup hidden={isOpen} {...props.popupProps} />
    </>
  )
}
export default function App() {
  const [isOpen, setIsOpen] = useState(true);
  const handleOnClick = () => {
    setIsOpen(!isOpen);
  };
  return (
    <div className="App">
      <PopupFC buttonText="Show popup1" />
      <PopupFC buttonText="Show popup2" />
      <PopupFC buttonText="Show popup3" />
    </div>
  );
}