CODEWITHSUNDEEP
javascriptreactjs
ZiiMakc
ZiiMakc

Reputation: 36966

How to spread function into div element?

I have a function that will handle show/hide and position of tooltip:

  tooltip = (e) => {
        // show/hide and position of tooltip
        // get element data
      }

And a div elements where i want to spread it:

<div {...tooltip} data='This is a tooltip 1'>Some div</div>
<div {...tooltip} data='This is a tooltip 2>Some div</div>

So it will look like:

<div onmouseover=tooltip(e) onmouseleave=tooltip(e) data='This is a tooltip 1'>Some div</div>

How to do it?

Upvotes: 0

Views: 41

Answers (1)

Estus Flask
Estus Flask

Reputation: 222855

There's no such predetermined solution for that because this is not a common task to attach same handler to several events. It should be:

<div onMouseOver={tooltip} onMouseLeave={tooltip}>Some div</div>

If there's a constant need to do this, consider creating a helper:

const mouseEnterLeave = fn => ({ onMouseOver: fn, onMouseLeave: fn });

Then spread attributes can be applied:

<div {...mouseEnterLeave(tooltip)}>Some div</div>

Upvotes: 1

Related Questions