Why you should be using React Context more often

15fbfc6f-ad37-4044-9fad-6a7be2114bb4.jsx

// inside ModalHeader component...

const ModalCloseButton = () => {
	const {closeModal} = useModal();

	return (
		<button type="button" onClick={() => closeModal()}>X</button>
	);
}

const ModalHeader = ({
	title
}) => {
	return (
		<header>
			{title}

			<ModalCloseButton />
		</header>
	);
};

37401779-8a78-434a-9da5-492f77fa81f8.jsx

// inside your Modal component...

const Modal = ({
	onClose
}) => {
	const closeModal = useCallback(() => {
		// Fake code, pretend to start the closing transition
		// and call `onClose` when the transition is done
		startCloseTransition(onClose);
	}, [onClose]);

	return (
		<ModalContextProvider closeModal={closeModal}>
			<ModalOverlay>
			  <ModalContent>
			    <ModalHeader />
			
			    <ModalBody>
			      {children}
			    </ModalBody>
			  </ModalContent>
			</ModalOverlay>
		</ModalContextProvider>
	);
};

3d5fedce-c708-4510-b5f8-8be0db5593cb.jsx

// No changes to `SomeComponent`...
const SomeComponent = () => {
	const [modalOpen, setModalOpen] = useState(false);
	return (
		<div>
			<button type="button" onClick={() => setModalOpen(true)}>Open Modal</button>

			{modalOpen ? (
				<Modal title="Some Modal" onClose={() => setModalOpen(false)}>
					<SomeComponentModalContent />
				</Modal>
			) : null}
		</div>
	);
};

const SomeComponentModalContent = () => {
	// `SomeComponentModalContent` has access to the modal context
	const {closeModal} = useModal();

	return (
		<div>
			<p>The content of the modal goes here</p>
			<button type="button" onClick={() => closeModal()}>Close the modal</button>
		</div>
	);
};

7807caf6-dabd-4081-8165-a316ba22792b.jsx

// inside your Modal component...

const Modal = ({
	title,
	onClose
}) => {
	const closeModal = useCallback(() => {
		// Fake code, pretend to start the closing transition
		// and call `onClose` when the transition is done
		startCloseTransition(onClose);
	}, [onClose]);

	return (
		<ModalOverlay closeModal={closeModal}>
		  <ModalContent>
		    <ModalHeader title={title} closeModal={closeModal} />
		
		    <ModalBody>
		      {React.cloneElement(children, { closeModal })}
		    </ModalBody>
		  </ModalContent>
		</ModalOverlay>
	);
};

9c0f8b3f-f0fe-4862-8fdd-e7ca6d423584.jsx

// inside ModalOverlay component...

const ModalOverlay = ({
	children
}) => {
	const { closeModal } = useModal();

	return (
		<div onClick={() => closeModal()}>
			{children}
		</div>
	);
};

a2bd032d-d3b2-474f-9b82-e151c8184afd.jsx

const SomeComponent = () => {
	const [modalOpen, setModalOpen] = useState(false);

	return (
		<div>
			<button type="button" onClick={() => setModalOpen(true)}>Open Modal</button>

			{modalOpen ? (
				<Modal title="Some Modal" onClose={() => setModalOpen(false)}>
					<SomeComponentModalContent />
				</Modal>
			) : null}
		</div>
	);
};

const SomeComponentModalContent = ({
	closeModal
}) => {
	// `closeModal` is available here because the `Modal`
	// component passes it via the `cloneElement` call
	return (
		<div>
			<p>The content of the modal goes here</p>
			<button type="button" onClick={() => closeModal()}>Close the modal</button>
		</div>
	);
};

ba596d2a-232c-4779-9bf7-0a371f18c57f.jsx

// modal context file...

export const ModalContext = React.createContext();

export const useModal = () => {
	return useContext(ModalContext);
}

export const ModalContextProvider = ({ closeModal, children }) => {
  const context = useMemo(() => {
    return {
      closeModal
    };
  }, [closeModal]);

  return (
    <ModalContext.Provider value={context}>{children}</ModalContext.Provider>
  );
};