javascript - Rendering a modal in React -
i'm trying trap onclick method on react component create react modal. i've added react-overlay
dependency , added file.
import modal 'react-overlays';
this anchor element,
<a href="#" onclick={this.handleclick} data-id={image.id}>
this handleclick method,
handleclick(event) { event.preventdefault(); let mediaid = event.currenttarget.attributes['data-id'].value; this.setstate({ overlay: <modal show={this.state.showmodal} onhide={this.close} mediaid={mediaid}/> }); }
i following error,
warning: react.createelement: type should not null, undefined, boolean, or number. should string (for dom elements) or reactclass (for composite components). uncaught error: element type invalid: expected string (for built-in components) or class/function (for composite components) got: undefined.(…)
i had problem , got around creating modal-component.
import modal 'react-modal' export default class custommodal extends react.component { constructor () { super(); this.openmodal = this.openmodal.bind(this); this.closemodal = this.closemodal.bind(this); this.state = { open: false } } openmodal () { this.setstate( {open: true}); $(function(){ $("#custom-modal").appendto("body"); }); } closemodal () { this.setstate({open: false}); } componentdidmount(){ $(function(){ $("#custom-modal").appendto("body"); }); } render () { return ( <div> <button onclick={this.openmodal}>my modal</button> <modal id="custom-modal" isopen={this.state.open} onrequestclose={this.closemodal}> // modal body content here <button onclick={this.closemodal}>close</button> </modal> </div> ); } }
and using this:
import custommodal '../components/custommodal' ... <li><custommodal/></li>
hope of help.
Comments
Post a Comment