Wordpress GutenBurg Block - React.Children.only expected to receive a single React element child

Question

When I try to add Tooltip in WordPress while creating gutenburg blocks
it show an error. Check below

Invariant Violation: Minified React error #143; visit https://reactjs.org/docs/error-decoder.html?invariant=143

React.Children.only expected to receive a single React element child

Here is my code which is I'm trying.

<Fragment>
    <div className="my-block-class">
        <Tooltip text={ __( 'Select Grid' ) }>
            { getIcon( 'block-icon', true ) }
        </Tooltip>
    </div>
    <InnerBlocks
        template={ this.getBlockTemplate() }
        templateLock="all"
        allowedBlocks={ [ 'hwb/my-block' ] }
    />
</Fragment>

Problem is in this code.

<Tooltip text={ __( 'Select Grid' ) }>
    { getIcon( 'block-icon', true ) }
</Tooltip>

When I remove Tooltip code works fine.

Update

getIcon() return the svg icon I also tried Dashicon it is not working that's mean problem is not in geticon() function.

I also tried it like this.

<Tooltip text={ __( 'Select Grid' ) }>
    <Dashicon icon="edit" />
</Tooltip>

Answer 1

There must be a some problem in getIcon function I tried Dashicon is working fine for me. You probably missed to import the Dashicon from wp-components

Try this one.

const { Tooltip, Dashicon } = wp.components;

<Tooltip text={ __( 'Select Grid' ) }>
    <Dashicon icon="edit" />
</Tooltip>