Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Popover not working

See original GitHub issue

Issue description

components: Popovers
reactstrap version #5.0.0-beta.2
import method es
react version #16.2.0
bootstrap version #4.0.0

What is happening?

Popovers causing React to flag an error. I can confirm that I react-transition-group (2.2.1) and react-popper (0.8.2) installed. An element with the id ‘popover_0’ definitely exists in the dom.

Error message in console

app.js:118204 Uncaught Error: The target 'popover_0' could not be identified in the dom, tip: check spelling
    at getTarget (app.js:118204)
    at PopperContent.render (app.js:121384)
    at finishClassComponent (app.js:77097)
    at updateClassComponent (app.js:77074)
    at beginWork (app.js:77449)
    at performUnitOfWork (app.js:79448)
    at workLoop (app.js:79512)
    at HTMLUnknownElement.callCallback (app.js:69766)
    at HTMLUnknownElement.d (raven.js:416)
    at HTMLUnknownElement.wrapped (app.js:66317)
    at Object.invokeGuardedCallbackDev (app.js:69805)
    at invokeGuardedCallback (app.js:69662)
    at renderRoot (app.js:79590)
    at performWorkOnRoot (app.js:80238)
    at performWork (app.js:80191)
    at requestWork (app.js:80102)
    at scheduleWorkImpl (app.js:79956)
    at scheduleWork (app.js:79913)
    at Object.enqueueSetState (app.js:75436)
    at Connect../node_modules/react/cjs/react.development.js.Component.setState (app.js:116819)
    at Connect.onStateChange (app.js:86931)
    at dispatch (app.js:124694)
    at app.js:124207
    at dispatch (app.js:124260)
    at app.js:149954
    at <anonymous>

Code

basket.bundles.map((bundle, i) =>
  <span className="d-flex align-items-center">
    <Button id={ `popover_${ i }` } onClick={ () => console.log('toggle popover') }>
      Launch Popover
    </Button>
    <Popover placement="bottom" isOpen={ true } target={ `popover_${ i }` } toggle={ () => console.log('toggle popover') }>
      <PopoverHeader>Popover Title</PopoverHeader>
      <PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
    </Popover>
  </span>
)

Issue Analytics

State:
Created 6 years ago
Reactions:1
Comments:6 (3 by maintainers)

Top GitHub Comments

3reactions

quantuminformationcommented, Sep 10, 2018

Shouldn’t the component be able to work out for itself if the thing in the DOM isn’t there, then render?

1reaction

TheSharpieOnecommented, Sep 11, 2018

IIRC it did originally, but others thought a nice error message would be better to track down why it wasn’t appearing (thus the “check spelling” b/c in that case, the wanted DOM element would never be there)