() => {
      const [isOpen, setIsOpen] = React.useState(false);
      let classToggle = isOpen ? "gds-modal__overlay gds-modal--shown" : "gds-modal__overlay";
      return (
        <div>
          <button className="gds-button gds-button--outline" onClick={()=> setIsOpen(!isOpen)}>Open Modal</button>
          <div className={classToggle}>
            <div className="gds-modal gds-layout__column--md-12">
              <form className="gds-modal__form">
                <div className="gds-modal__header">
                  <h2 className="gds-modal__title gds-text--header-sm">
                    Modal title goes here...
                  </h2>
                  <button
                    className="gds-modal__close-button"
                    onClick={()=> setIsOpen(!isOpen)}
                  ></button>
                </div>
                <div className="gds-modal__body">
                  <p className="-m-b-3">Modal body content goes here.</p>
                </div>
                <div className="gds-modal__footer -text-right">
                  <button
                    onClick={()=> setIsOpen(!isOpen)}
                    className="gds-button gds-button--default gds-button--block-sm -m-b-3-sm -m-r-3"
                  >
                    Cancel</button
                  ><button
                    onClick={()=> setIsOpen(!isOpen)}
                    className="gds-button gds-button--primary gds-button--block-sm"
                  >
                    Save Changes
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      )
    }