Is there a way to use components as child elements?

[ambrwlsn]

<span>

<ReactHint
delay={100}
attribute="label"
className={cp-tooltip-${mode}}
events={{hover: true}}
/>

<Icon.Information label="Left" label-at="left" />
<button label="Top" label-at="top">Top</button>

</span>

I would like to be able use a component (Icon.Information) in place of a single element (button).

The button renders and has the correct tooltip.
The component renders but has no tooltip.

Could you please advise be how this might be possible? Thanks

[slmgc]

Hi! Yep, this is doable if the component passes these props as the attributes of the dom-element, e.g.:

// let's imagine that the component's implementation looks like this:
Icon.Information = (props) =>
    <div className="icon-wrapper">
       <div className="icon" />
    </div>

// then all you need to do is to pass the props to the outermost dom-element:
Icon.Information = (props) =>
    <div className="icon-wrapper"
        label={this.props.label}
        label-at={this.props["label-at"]>
           <div className="icon" />
    </div>

// in case it's a third-party component and you can't change it,
// you could probably wrap it with a div or span like this:
<span label="Left" label-at="left">
    <Icon.Information />
</span>

Hope this helps!

[ambrwlsn]

Hi! Thanks.

Sadly your third example does not work. The props are not recognised by wrapping a span around the component.

In my case, the component is a self-created one. It is only a stateless component returning an SVG. To work around the issue, I have had to add props to the component (as in your first two examples). Not the best workaround but better than nothing.

[slmgc]

Hi, can you provide an example of what you did? I've just checked it with an SVG and a div-wrapper and it worked perfectly.

[ambrwlsn]

I made it work finally when I figured out how to pass down props correctly :-)

[slmgc]

Ok, great, resolving :3