Extending a react Symbol(react.forward_ref) from leaflet-react

Question

I'm importing Popup from react-leaflet import { Marker, Map, Popup, TileLayer, ZoomControl, GeoJSON, ScaleControl} from 'react-leaflet' and trying to extend it class NewPopup extends Popup { onPopupOpen = ({ popup }: { popup: LeafletElement }) => { if (popup === this.leafletElement) { console.log("Here open"); this.onOpen() } } onPopupClose = ({ popup }: { popup: LeafletElement }) => { if (popup === this.leafletElement) { console.log("Here close"); this.onClose() } } } This compiles fine, but when I run it in the browser I get the error "Super expression must either be null or a function, not object" When I console.log the Popup object it looks like this {$$typeof: Symbol(react.forward_ref), render: ƒ, apply: ƒ, bind: ƒ, call: ƒ, …} Rather than a React component. Do I need to import it differently? JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

Answer 1

This thread discusses why the following error occurs: Super expression must either be null or a function, not object The short answer is: Popup component is not supported to be extended via inheritance in react-leaflet library. In fact even React official documentation encourages to prefer composition over inheritance: At Facebook, we use React in thousands of components, and we haven’t found any use cases where we would recommend creating component inheritance hierarchies. Props and composition give you all the flexibility you need to customize a component’s look and behavior in an explicit and safe way. Remember that components may accept arbitrary props, including primitive values, React elements, or functions. Having said that, the following example demonstrates how to customize Popup component: (it will print a message into console once the popup is closed or opened) class MyPopup extends Component { componentDidMount() { const { map } = this.props.leaflet; //get map instance map.on("popupopen", e => { console.log(e.popup); console.log("Popup opened") }); map.on("popupclose", e => { console.log(e.popup); console.log("Popup closed") }); } render() { return ; } } MyPopup component needs to be wrapped with withLeaflet HOC in order to pass Leaflet context Demo