I am facing a query regarding how to close a Modal from within a sub-component of the same Modal itself. Allow me to elaborate on what I am trying to achieve here.

I have developed a Modal that is triggered from a Component to enable users to add a new Client to a database. Given that I intend to add several other elements to the database in a similar manner, I opted to create a generic Modal component and pass another component as a prop to the Modal component - such as a form containing the necessary fields to add a new client.

Below is some code for better understanding:

Table.js

import DataTable from 'react-data-table-component';
import React, { useState } from 'react';
import Modal from './modal';

const Table = (props) => {
  const [showModal, setShowModal] = useState(false);

  return (
    <div id='overview' className="bg-slate-100 h-screen w-full overflow-y-auto">
      <div className='flex justify-end h-20 w-3/4 m-auto'>
        <div className='flex space-x-2 h-full'>
          <button type='button' onClick={() => setShowModal(true)} className='self-center inline-block px-6 py-2.5 bg-green-500 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-green-600 hover:shadow-lg focus:bg-green-600 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-green-700 active:shadow-lg transition duration-150 ease-in-out'>Add</button>
        </div>
      </div>
      <div className='w-3/4 m-auto'>
        <DataTable 
          columns={props.columns} 
          data={props.tableData} //This will need to be retrieved from the database
          direction="auto"
          fixedHeaderScrollHeight="300px"
          pagination
          responsive
        />
      </div>
      <Modal onClose={() => setShowModal(false)} show={showModal} title={props.title}>
        {props.modal}
      </Modal>
    </div>
  );
};

export default Table;

Modal.js

import React from 'react';

const Modal = ({ show, onClose, children, title }) => {

  const handleCloseClick = (e) => {
    e.preventDefault();
    onClose();
  };

  return ( show ? (
    <div tabIndex="-1" aria-hidden="true" className="overflow-y-auto fixed inset-0 bg-gray-600 bg-opacity-50 z-50 h-full w-full md:inset-0 md:h-full">
      <div className="relative top-20 p-4 mx-auto w-1/2 h-full md:h-auto">
        <div className="relative bg-white rounded-lg shadow dark:bg-gray-700">
          <button type="button" onClick={handleCloseClick} className="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white">
            <svg aria-hidden="true" className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd"></path></svg>
            <span className="sr-only">Close modal</span>
          </button>
          <div className="py-6 px-6 lg:px-8">
            <h3 className="mb-4 text-xl font-medium text-center text-gray-900 dark:text-white">{title}</h3>
            {children}
          </div>
        </div>
      </div>
    </div> 
  ) : null
  );
};

export default Modal;

ClientForm.js

import { useForm } from 'react-hook-form';
import Input from '../form-components/input';
import Button from '../form-components/button';
import { ValidateVat } from '../../lib/vat';
import { useState } from 'react';

const ClientForm = () => {
  const { register, handleSubmit } = useForm();
  const [client, setClient] = useState(undefined);
  const [street, setStreet] = useState(undefined);
  const [city, setCity] = useState(undefined);
  const [zip, setZip] = useState(undefined);

  const populateVatResult = (vatNumber) => {
    ValidateVat(vatNumber)
      .then(data => {
        setClient(data.company.name);
        setStreet(data.company.address.split('\n')[0]);
        setCity(data.company.address.split('\n')[1].split(' ')[1]);
        setZip(data.company.address.split('\n')[1].split(' ')[0]);
      });
    
  };

  const createClient = async (data) => {
    const res = await fetch('http://localhost:3000/api/customer', {method: 'POST', headers: {
      'Content-Type': 'application/json',
    }, body: JSON.stringify({
      customer: data['Client Name'],
      email: data['Email'],
      vat: data['VAT Number'],
      street: data['Street'],
      city: data['City'],
      zip: data['ZIP code']
    })},);
    const result = await res.json();
    return result;
  };

  return (
    <form className='flex flex-col justify-around' onSubmit={handleSubmit((data) => createClient(data))}>
      <Input label='VAT Number' register={register} required onBlur={e => {populateVatResult(e.currentTarget.value);}}/>
      <Input label='Client Name' register={register} required value={client} onChange={e => setClient(e.target.value)} />
      <Input label='Email' register={register}/>
      <Input label='Street' register={register} required value={street} onChange={e => setClient(e.target.value)}/>
      <Input label='City' register={register} required value={city} onChange={e => setClient(e.target.value)}/>
      <Input label='ZIP code' register={register} required value={zip} onChange={e => setClient(e.target.value)}/>
      <Button type='submit' />
    </form>
  );
};

export default ClientForm;

What is the best way to close the Modal from within the ClientForm upon successful submission to the database? After saving the data to the database, my aim is to close the Modal and view the Table, with all the saved records, again.

Any suggestions on resolving this issue? Should I have taken a different approach by creating a Modal per type I wish to save, like Clients, Projects, etc., rather than having a general Modal component?

Cheers!