Trying to get my head around this idea - I believe it may be going against design rules for React - but still can't figure out how to do it better.
I've got an application with quite a few modal forms that may pop up - and I'm trying to ensure they're all consistent in the UI aspect. As a result, I made a "GenericModal" component, which can take title / formComponent or body/buttons. This works well and got it to populate the component.
The problem is that I can't figure out how I get my buttons to interact with the formComponent. I've tried passing refs through, but for some reason, I couldn't get that to work at 2 am, gave up, and went to bed.
Can anyone suggest anything that I'm missing? I have considered that I'm trying to get the form component to do too much (i.e, I should be passing a formik instance to the form, so that I can then interact with it from the component hosting the ).
function GenericModal(props) {
return (
props.show && (
<Modal
show={props.show}
onHide={props.handleClose}
backdrop="static"
keyboard={false}
>
<Modal.Header closeButton={props.closeButton && props.closeButton}>
<Modal.Title>{props.title ? props.title : "Modal"}</Modal.Title>
</Modal.Header>
<Modal.Body>
{props.formComponent ? props.formComponent : props.body && props.body}
</Modal.Body>
{props.buttons && (
<Modal.Footer>
{props.buttons &&
props.buttons.map((button) => (
<Button
variant={button.style}
key={button.key}
onClick={() => handleButtonClick(button.key)}
>
{button.text}
</Button>
))}
</Modal.Footer>
)}
</Modal>
)
);
}
export default GenericModal;
The buttons will call handleButtonClick, which for "submit" or "reset" I was originally thinking to fire functions on formComponent.
This component is then used as follows:
{showNewModal && (
<GenericModal
show={showNewModal}
handleClose={closeNewModal}
title="New Asset"
formComponent={<AssetForm asset={new Asset()} />}
closeButton={true}
buttons={
{ text: "Create", style: "primary", key: "submit" }
}
/>
)}
Not sure I fully understood the problem, but it sounds like you want to make sure you have control over what happens when the button is clicked in the GenericModal?
Can you just pass the onClick handler as a prop instead of the key?
So inside your GenericModal you'd then use the button like this:
<Button onClick={props.button.onClick} />
This way your modal button can call a callback in the parent component and you can handle it in any way you'd like.
I solved this by passing an object to the asset form from GenericModal, and having it populate the submit/reset functions into that object, so I could call that from the parent component on button press (so that Formik can validate the data, then pass back to the modal).
Bit of a hacky way of doing it, probably the wrong way, but it works!