Async content in Modal

const Content = {};

Content["apropos"] = () => `
    <div style="text-align:center">
      Demoing filling modal content with fetch results.
      <br />
      Get some Chuck Norris quotes
    </div>
`

Content['cnquotes'] = async () => {
    const resp = await fetch('https://api.chucknorris.io/jokes/random')
    const json = await resp.json()
    return `
      <div class="cnquotes">
        ${json.value}
      </div>
    `
}

window.State = {
  content: null,
  isOpen: false,
  openDialog: function(key){
    State.content = Content[key]
    State.isOpen = true;
    view()
  },
  closeDialog: function(){
    State.isOpen = false;
    view()
  }
}

async function view () {
  var modalCls =  State.isOpen 
    ? "modal modal-shown"  
    : "modal modal-hidden"
  modal.innerHTML =  `
    <div class="${modalCls}">
      <div class="modal-content">
        <div style="text-align:right" onclick="State.closeDialog()">
          <span class="modal-close">close</span>
        </div>
        <p>${await State.content()}</p>
      </div>
    </div>
  `
}

triggerModal.addEventListener("click", function (e) {
  var modal  = e.target.getAttribute("modal")
  modal && State.openDialog(modal)
})