Looking for suggestions for a better solution

Question

So I have a site which has 12 buttons. 6 of these buttons will need to launch a popup with a different video and 6 buttons will need to launch a popup with 6 images.

Now, currently, I am experimenting with a single popup displaying an image. And this is fairly easy, I set a state

const [showModal, setShowModal] = useState(false);

And then I have a button which will set the show onClick and then a model is shown - eg

<button className="buttonGeneral" onClick={()=>setShowModal(true)}>SUMMARY11</button> <ModalReact showModal={showModal} onClose={() => setShowModal(false)} image={props.image_1} size='med'/>

Thinking about this, I am thinking I will need 2 different types of modals, one for video and one for images. But with the approach above, I am going to need to useState with 12 different states. This seems a bit wrong, but I cannot think of any other way.

For completeness, here is the ModalReact component

import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
import '../styles/react-bs.css';

function ModalReact({showModal = false, onClose = () =>{}, image, size}) {
  console.log("im ", image)
  return (
    <Modal
      size={size}
      show={showModal} 
      onHide={onClose}
      backdrop="static"
      keyboard={false}    
      // dialogClassName="videoPopup"    
    >

    <Modal.Body><img src={image} alt="lala"></img></Modal.Body>
    <Modal.Footer>
      <Button variant="secondary" onClick={onClose}>
        Close
      </Button>
    </Modal.Footer>
  </Modal>
  )
}

export default ModalReact

Answer 1

You need to maintain different states for all the buttons. I would suggest writing a custom component with its state maintained in the same component so that it's available for only that component. Based on that, we can open a modal from its state variable.

export default function ModalReact({ itemNum }) {
  const [showModal, setShowModal] = useState(false);
  const handleClose = () => setShowModal(false);
  const handleShow = () => setShowModal(true);
  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        Launch demo modal {itemNum}
      </Button>
      <div style={{ display: "block", width: 700, padding: 30 }}>
        <Modal show={showModal} onHide={handleClose}>
          <Modal.Header closeButton>
            <Modal.Title>Modal heading {itemNum}</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            Woohoo, you're reading this text in a modal! {itemNum}
            {itemNum > 6 ? "image" : "video"}
          </Modal.Body>
          <Modal.Footer>
            <Button variant="secondary" onClick={handleClose}>
              Close
            </Button>
            <Button variant="primary" onClick={handleClose}>
              Save Changes
            </Button>
          </Modal.Footer>
        </Modal>
      </div>
    </>
  );
}

We can use that from any component. You said you have 12 buttons so iterate and display all those buttons. I have used a simple array and iterating to display all the buttons.

return (
  <div className="container">
    {Array.from({ length: 12 }, (_, i) => i + 1).map((item) => (
      <CustomModal itemNum={item} />
    ))}
  </div>
);

Attached is a sandbox for reference.