I am trying to implement the standalone example from here, using react-popper
- I basically just copy pasted the code for now. It does render the component. However, when I click everything breaks. I am using it in Gatsby.js - if that should make a difference?
That's the error(s) I'm getting:
index.js:2177 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check your code at StandaloneExample.js:36.
And:
Uncaught TypeError: Object(...)(...) is not a function at InnerPopper.render (Popper.js:159)
And:
The above error occurred in the component: in InnerPopper (created by Context.Consumer) in Popper (at StandaloneExample.js:34)
And multiple of these:
TypeError: Object(...)(...) is not a function
Here's my code:
import React, { PureComponent } from 'react'
import { Popper, Arrow } from 'react-popper'
import './popper.css'
class StandaloneExample extends PureComponent {
constructor(props) {
super(props);
this.state = {
isOpen: false,
}
}
handleClick = (e) => {
console.log(e);
this.setState({
isOpen: !this.state.isOpen,
})
}
render() {
return (
<div>
<h2>Standalone Popper Example</h2>
<div
ref={div => (this.target = div)}
style={{ width: 120, height: 120, background: '#b4da55' }}
onClick={this.handleClick}
>
Click {this.state.isOpen ? 'to hide' : 'to show'} popper
</div>
{this.state.isOpen && (
<Popper className="popper" target={this.target}>
Popper Content for Standalone example
<Arrow className="popper__arrow" />
</Popper>
)}
</div>
)
}
}
export default StandaloneExample
I've modified things a bit (the way I implement state etc.), because I thought this might fix the errors I'm getting, but it didn't. Apart from that the code is pretty much the same as in the sandbox example - I'm not sure where it breaks.
edit: I am importing things like so:
import StandaloneExample from './MenuDropdown/StandaloneExample.js'
and am using it in my render function like so:
<StandaloneExample />
The example you linked is for react-popper@0.x
.
Please check that you aren't with version 1 or greater.
react-popper
V1 had breaking changes from V0.