I have several components, a modal component which contains the entire form system. This component contains a modalBody component which contains all the fields, a modalFooter component which contains the submit button. The inputs are contained in modalBody. How to check that the fields contained in modal body are not empty and do it only when we click on the submit button located in the modal footer, I use chakra ui. I use react-redux. The image opposite illustrates the structure of the componentcomponent form structure
I placed an isSubmit state in the modal component which is passed in props to the modalBody component up to the Input component, initially it is false and once the submit button is clicked it passes to true the sub-component receiving isSubmit in props( modalBody and input) can therefore react accordingly (sends data to the database via api) the problem with this method is that I cannot verify anything the user can therefore submit empty fields (and that's not cool )