vanilla js react render

    const classification = {
      title: "Content Classification",
      checks: ["Certified","Uncertified","My Favorites"]
    }
    const geo = {
      title: "Geo",
      checks: ["APLA","China","EMEA","North America","Global"]
    }
    const type = {
      title: "Content Type",
      checks: ["All","Tableau","Excel","PDF","HTML"]
    }
    // Helper functions
    var render = function(template,elem){
      // Set rendering element for the component
      if(typeof template === 'function'){
        template.elem = elem;
      }
      // If elem is an element, use it.
      // If it's a selector, get it.
      elem = typeof elem === 'string' ? document.querySelector(elem) : elem;
      if(!elem) return;
      // Get the template
      template = (typeof template === 'function' ? template(template.state) : template);
      if(typeof template != 'string') return;
      // Render the template into the element
      if(elem.innerHTML === template) return;
      elem.innerHTML = template;
      // Dispatch a render event
      if (typeof window.CustomEvent === 'function') {
        var event = new CustomEvent('render',{
          bubbles: true
        });
        elem.dispatchEvent(event);
      }
      // Return the elem for use elsewhere
      return elem;
    }

    function filterBlock(props){
      return '<h3>'+props.title +'<button onClick="openClick"><i class="fas fa-minus"></i><i class="fas fa-plus" style="display:none"></i></button></h3><ul class="fade">'+props.checks.map(c => {return '<li><input type="checkbox" value="'+c+'" onChange="handleChange()" /> '+c+'</li>'}).join("")+'</ul>'
    }

    render(filterBlock(classification),'#classification');
    render(filterBlock(geo),'#geo');
    render(filterBlock(type),'#type');