Fork me on GitHub
Slack Archive

This page is not created by, affiliated with, or supported by Slack Technologies, Inc.

2021-10-08

Channels

#reagent
<
2021-10-08
>
Wilson Velez22:10:14

Hi, I’m using react-bootstrap in a reagent app, so far no issues, I have been able to use most of the ui components without problems, but right now I’m having error trying to translate this example https://react-bootstrap-v4.netlify.app/components/overlays/#overlay-trigger 

const renderTooltip = (props) => (
  <Tooltip id="button-tooltip" {...props}>
    Simple tooltip
  </Tooltip>
);

render(
  <OverlayTrigger
    placement="right"
    delay={{ show: 250, hide: 400 }}
    overlay={renderTooltip}
  >
    <Button variant="success">Hover me to see</Button>
  </OverlayTrigger>,
);

Wilson Velez22:10:53

this is my try 

(defn Tooltip [props]
  [:> Tooltip (merge {:id "idx"} props)
   "simple tooltip"])

(defn Popover []
  (let [tt [Tooltip {}]]
    [:> OverlayTrigger {:placement "right"
                        :overlay   tt}
     [:> Button {:variant "success"} "hover me"]]))
.....
 [:div "test" [Popover]}]]
....

Wilson Velez23:10:52

when I hover the button I see this errors 

Uncaught TypeError: Cannot read properties of undefined (reading 'className')
    at Object.eval [as children] (Overlay.js:102)
    at eval (Overlay.js:104)
    at renderWithHooks (react-dom.development.js:14986)
    at updateForwardRef (react-dom.development.js:17045)
    at beginWork (react-dom.development.js:19099)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3946)
    at Object.invokeGuardedCallbackImpl (react-dom.development.js:3995)
    at invokeGuardedCallback (react-dom.development.js:4057)
    at beginWork$1 (react-dom.development.js:23965)
    at performUnitOfWork (react-dom.development.js:22777)
eval @ Overlay.js:102
eval @ Overlay.js:104
renderWithHooks @ react-dom.development.js:14986
updateForwardRef @ react-dom.development.js:17045
beginWork @ react-dom.development.js:19099
callCallback @ react-dom.development.js:3946
invokeGuardedCallbackImpl @ react-dom.development.js:3995
invokeGuardedCallback @ react-dom.development.js:4057
beginWork$1 @ react-dom.development.js:23965
performUnitOfWork @ react-dom.development.js:22777
workLoopSync @ react-dom.development.js:22708
renderRootSync @ react-dom.development.js:22671
performSyncWorkOnRoot @ react-dom.development.js:22294
eval @ react-dom.development.js:11328
exports.unstable_runWithPriority @ scheduler.development.js:469
runWithPriority$1 @ react-dom.development.js:11277
flushSyncCallbackQueueImpl @ react-dom.development.js:11323
flushSyncCallbackQueue @ react-dom.development.js:11310
eval @ react-dom.development.js:22404
batchedEventUpdates @ react-dom.development.js:3746
dispatchEventForPluginEventSystem @ react-dom.development.js:8508
attemptToDispatchEvent @ react-dom.development.js:6006
dispatchEvent @ react-dom.development.js:5925
exports.unstable_runWithPriority @ scheduler.development.js:469
dispatchUserBlockingUpdate @ react-dom.development.js:5895
react_devtools_backend.js:4049 The above error occurred in the <Overlay> component:

    at eval ()
    at Overlay ()
    at OverlayTrigger ()
    at cmp ()
    at div
    at cmp ()
    at div
    at eval ()
    at div
    at eval ()
    at cmp ()
    at div
    at cmp ()

Consider adding an error boundary to your tree to customize error handling behavior.
Visit  to learn more about error boundaries.
overrideMethod @ react_devtools_backend.js:4049
logCapturedError @ react-dom.development.js:20086
lane.callback @ react-dom.development.js:20119
commitUpdateQueue @ react-dom.development.js:12319
commitLifeCycles @ react-dom.development.js:20737
commitLayoutEffects @ react-dom.development.js:23427
callCallback @ react-dom.development.js:3946
invokeGuardedCallbackImpl @ react-dom.development.js:3995
invokeGuardedCallback @ react-dom.development.js:4057
commitRootImpl @ react-dom.development.js:23152
exports.unstable_runWithPriority @ scheduler.development.js:469
runWithPriority$1 @ react-dom.development.js:11277
commitRoot @ react-dom.development.js:22991
performSyncWorkOnRoot @ react-dom.development.js:22330
eval @ react-dom.development.js:11328
exports.unstable_runWithPriority @ scheduler.development.js:469
runWithPriority$1 @ react-dom.development.js:11277
flushSyncCallbackQueueImpl @ react-dom.development.js:11323
flushSyncCallbackQueue @ react-dom.development.js:11310
eval @ react-dom.development.js:22404
batchedEventUpdates @ react-dom.development.js:3746
dispatchEventForPluginEventSystem @ react-dom.development.js:8508
attemptToDispatchEvent @ react-dom.development.js:6006
dispatchEvent @ react-dom.development.js:5925
exports.unstable_runWithPriority @ scheduler.development.js:469
dispatchUserBlockingUpdate @ react-dom.development.js:5895
react-dom.development.js:11341 Uncaught TypeError: Cannot read properties of undefined (reading 'className')
    at Object.eval [as children] (Overlay.js:102)
    at eval (Overlay.js:104)
    at renderWithHooks (react-dom.development.js:14986)
    at updateForwardRef (react-dom.development.js:17045)
    at beginWork (react-dom.development.js:19099)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3946)
    at Object.invokeGuardedCallbackImpl (react-dom.development.js:3995)
    at invokeGuardedCallback (react-dom.development.js:4057)
    at beginWork$1 (react-dom.development.js:23965)
    at performUnitOfWork (react-dom.development.js:22777)
eval @ Overlay.js:102
eval @ Overlay.js:104
renderWithHooks @ react-dom.development.js:14986
updateForwardRef @ react-dom.development.js:17045
beginWork @ react-dom.development.js:19099
callCallback @ react-dom.development.js:3946
invokeGuardedCallbackImpl @ react-dom.development.js:3995
invokeGuardedCallback @ react-dom.development.js:4057
beginWork$1 @ react-dom.development.js:23965
performUnitOfWork @ react-dom.development.js:22777
workLoopSync @ react-dom.development.js:22708
renderRootSync @ react-dom.development.js:22671
performSyncWorkOnRoot @ react-dom.development.js:22294
eval @ react-dom.development.js:11328
exports.unstable_runWithPriority @ scheduler.development.js:469
runWithPriority$1 @ react-dom.development.js:11277
flushSyncCallbackQueueImpl @ react-dom.development.js:11323
flushSyncCallbackQueue @ react-dom.development.js:11310
eval @ react-dom.development.js:22404
batchedEventUpdates @ react-dom.development.js:3746
dispatchEventForPluginEventSystem @ react-dom.development.js:8508
attemptToDispatchEvent @ react-dom.development.js:6006
dispatchEvent @ react-dom.development.js:5925
exports.unstable_runWithPriority @ scheduler.development.js:469
dispatchUserBlockingUpdate @ react-dom.development.js:5895

javi02:10:58

:overlay (r/as-element tt)

➕ 1
☝️ 1
Wilson Velez21:10:03

@U9VP9VCE6 thanks for your replay. When I change my code the error changed to 

Uncaught Error: [object Object] is not ISeqable
.....
The above error occurred in the <ui$overlays$Tooltip> component:
but then I realized that I was using the same name for my component ant for the react-boostrap component facepalm , I changed the name and it worked, thanks…..

Wilson Velez23:10:51

I don’t understand how should I provide the overlay attribute

David Vujic08:10:43

I think the reason is that the React component is expecting the overlay prop to be a React element. To convert your Reagent component into a React element, there are helper functions in the Reagent library: Have a look at. r/as-element - I think that one will solve it. Something like :overlay (r/as-element tt)

Wilson Velez21:10:30

@U018VMC8T0W thanks for your replay. When I change my code the error changed to 

Uncaught Error: [object Object] is not ISeqable
.....
The above error occurred in the <ui$overlays$Tooltip> component:
but then I realized that I was using the same name for my component ant for the react-boostrap component facepalm , I changed the name and it worked, thanks…..

👍 1