JSFiddle - React, Tailwind, and code Playground

by igalst

Babel + JSX

const Modal = ({ id, isOpen, onToggle, children }) => {

	const detectHash = (isOnload) =>{
	  const isHashExists = getHash('modal') === id;
    isOnload && isHashExists && onToggle(true);
  }
  
  useEffect(() => {
		detectHash(true);
  }, []);

	useEffect(() => {
		detectHash(false);
  }, [router]);
  
  useEffect(() => {
		addOrRemoveHash(isOpen, 'modal', id);
  }, [isOpen]);
  

	if (!isOpen) return null;
  return (<div>{children}</div>);
};

const Filters = () => {
	const [isDateOpen, setIsDateOpen] = useState(false);

	return (
  	<div>
  	  <h2>my filters</h2>
      <button onClick={() => setIsDatesOpen(true)}>Open Dates</button>
      <button onClick={() => setIsDatesOpen(false)}>Close Dates</button>
      
      <Modal id="dates" isOpen={isDatesOpen} onToggle={setDatesOpen}>
        this is a modal
      </Modal>
  	</div>
  )
}