Render raw html in Gutenberg block

Question

I want some custom html-block like

<table>
  <tr>
    <td>1</td>
  </tr>
</table>

to be rendered in my block, that I register using registerBlockType. Therefore I try to add the html using dangerouslySetInnerHTML, but if I do so, I end up with being unable to select my block in gutenberg, so there possibly is an issue with my code.

( function( blocks, editor, element ) {
    var el = element.createElement;

    blocks.registerBlockType( 'mcb/call-to-action', {
        title: 'My List', // The title of block in editor.
        icon: 'editor-table', // The icon of block in editor.
        category: 'common', // The category of block in editor.
        attributes: {
            content: {
                type: 'string',
                default: 'Collaboratively customize web-enabled supply chains and turnkey collaboration and idea-sharing Assertively cultivate.'
            },
            button: {
                type: 'string',
                default: 'Join Today'
            }
        },      
        edit: function(props) {
            return "Text"; //this works
            //this will make my block disappear from gutenberg:
            //return <div dangerouslySetInnerHTML={{__html: '<strong>strong text</strong>'}} />;
        },          
        save: function( props ) {
            return (
                el( 'div', { className: props.className },
                    el( editor.RichText.Content, {
                        tagName: 'p',
                        className: 'mcb-call-to-action-content',
                        value: props.attributes.content,
                    } ),
                    el( 'button', { className: 'mcb-call-to-action-button' },
                        props.attributes.button
                    )
                )
            );
        },
    } );
} )( window.wp.blocks, window.wp.editor, window.wp.element );

This is the exact part:

edit: function(props) {
    return <div dangerouslySetInnerHTML={{__html: '<strong>strong text</strong>'}} />;
},  

Answer 1

Wordpress offers their own implementation called RawHTML. This works:

const htmlToElem = ( html ) => wp.element.RawHTML( { children: html } );
    ...
    edit: function(props) {             
        return htmlToElem("<strong>strong text</strong>");
    },
    ...

Answer 2

This way you can do it without a separate build step:

edit: function(props) {
    return element.createElement(element.RawHTML, null, '<strong>strong text</strong>');
},  

However if you do a build step using @wordpress/scripts npm.js package, the equivalent source is:

import { RawHTML } from '@wordpress/element';

//...

edit: function(props) {
  return (
    <RawHTML>
      { '<strong>strong text</strong>' }
    </RawHTML>
  );
}