Looking for a clever way to render multiple children component dynamically - reactjs

Question

I have a Modal component composed of a <Header> and a <Content>.
I want both children <Header> and <Content> to be rendered dynamically based on a given value ('modal type').
My first intuition was to create an object storing modal components like:
export const useModalDetails = (onClose = () => {}) => {
const [ modalDetails, setModalDetails ] = useMergeState({
Header: () => <div/>,
Content: () => <div/>,
onClose,
});
return [modalDetails, setModalDetails];
};
Then a function to set modal details base on the value type:
const onChangeModalType = (type) => {
if (type === 'type1') {
setModalDetails({
Header: () => <div>Modal Header Type 1</dov>,
Content: () => <div>Modal Content Type 1</div>,
open: true
})
} else if (type === 'type2') {
setModalDetails({
Header: () => <div>Modal Header Type 2</dov>,
Content: () => <div>Modal Content Type 2</div>,
open: true
})
}
}
Then I can use the react-hook in the <Modal> component:
import SemanticModal from 'semantic-ui-react'
const Modal = () => {
const [ modalDetails, setModalDetails ] = useMergeState({
Header: () => <></>,
Content: () => <></>,
open: false,
});
return [modalDetails, setModalDetails];
onChangeModalType('type2')
return (
<>
<SemanticModal
Header={modalDetails.Header}
Content={modalDetails.Content}
open={modalDetails.open}
/>
<button onClick={() => onChangeModalType('type1')}>load type 1</button>
<button onClick={() => onChangeModalType('type2')}>load type 2</button>
</>
)
}
Bear in mind I have 12 different types of content, and header for a <Modal>, that means 12 if, else statements for each.
Do you have any idea how I could develop that in a smarter, clever, more readable, maintainable... WAY?

Answer 1

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