score:0

Accepted answer

If you're decided on having an individual modal component that switches behaviour based on state/props you could approach it like this:

const modals = {
  type1: {
    Header: <div>Modal1 Header</div>,
    Content: <div>Modal1 Content</div>,
    open: true,
  },
  type2: {
    Header: <div>Modal2 Header</div>,
    Content: <div>Modal2 Content</div>,
    open: true,
  },
};

const Modal = ({type}) => {
  const [modalType, setModalType] = useState(type);
  const { Header, Content, open } = modals[modalType];

  return (
    <>
      <SemanticModal
        Header={Header}
        Content={Content}
        open={open}
      />
    </>
  );
};

An alternative to consider is creating a reusable BaseModal component which you extend into a seperate component for each use case:

const BaseModal = ({ Header, Content, open }) => {
  return (
    <>
      <SemanticModal Header={Header} Content={Content} open={open} />
    </>
  );
};

const Modal1 = () => {
  return (
    <BaseModal
      Header={<div>Modal1 Header</div>}
      Content={<div>Modal1 Content</div>}
      open={true}
    />
  );
};

The nice thing about this pattern is that you still get to share the common elements of all modals whilst selectively injecting the parts that need to differ


Related Query

More Query from same tag