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

Popular posts from this blog

java - SSE Emitter : Manage timeouts and complete() -

jquery - uncaught exception: DataTables Editor - remote hosting of code not allowed -

java - How to resolve error - package com.squareup.okhttp3 doesn't exist? -