javascript - Can't render react-bootstrap ModalTrigger -


i'm new reactjs , having trouble rendering modaltrigger intended show/hide modal in separate component. boilerplate used react-starter-kit.

the error returned is: "invariant violation: element type invalid: expected string (for built-in components) or class/function (for composite components) got: undefined. check render method of menubutton."

it seems unlikely 1 supposed convert component string before returning..... here code:

import react, {proptypes, component} 'react'; import withstyles 'isomorphic-style-loader/lib/withstyles'; import modaltrigger 'react-bootstrap'; import menu '../menu'; import s './menubutton.css';  class menubutton extends component {  static getinitialstate() {return {ismenuopen: false}};  constructor() {     super();     this.state = {ismenuopen: false};     this.handleclick = this.handleclick.bind(this); }  handleclick() {     if(this.state) {         this.setstate({ismenuopen: !(this.state.ismenuopen)});     } }  render() {     var btnimage = require('./menubutton.svg');     var show = {show: this.state};     console.log('menu ' + <menu/>);     return (         <modaltrigger modal={<menu />}>             <div classname={s.menubtn}>                 <a onclick={this.handleclick.bind(this)}>                     <img classname={s.menubtnimg} src={btnimage}/> {show} {this.state.ismenuopen ? 'stäng meny' : 'meny'}                 </a>             </div>         </modaltrigger>     ); } } export default withstyles(s)(menubutton);

and modal:

import react, { component } 'react'; import withstyles 'isomorphic-style-loader/lib/withstyles'; import s './menu.css';  class menu extends component { static getinitialstate() {return {show: false}};  static showmodal(){     this.setstate({show: true}); };  static hidemodal() {     this.setstate({show: false}); }  render() {     if (!this.state.show) {         return <span/>;     }     return (         <modal {...this.props} title='meny' animation={true}>             <div classname='modal-body'>                 <ul>                     <a href="#main"><li>startsida</li></a>                     <a href="#omoss"><li>om oss </li></a>                     <a href="#reminiscens"><li>reminiscens</li></a>                     <a href="#appen"><li>appen</li></a>                     <a href="#stories"><li>berättelser</li></a>                     <a href="#nyheter"><li>nyheter om projektet</li></a>                     <a href="#englishinfo"><li>info in english</li></a>                 </ul>             </div>         </modal>     ); } } export default withstyles(s)(menu);

modaltrigger deprecated. , seems you've started working on alternative solution: using component state instead of <modaltrigger/> modal logic. here's quick example. find out more in documentation.

const modal = reactbootstrap.modal;    class menu extends react.component {    constructor() {      super();      this.state = { ismenuopen: false };      this.handleopen = this.handleopen.bind(this);      this.handleclose = this.handleclose.bind(this);    }      handleopen() {      this.setstate({ ismenuopen: true });    }      handleclose() {      this.setstate({ ismenuopen: false });    }      render() {      return (        <div>          <button onclick={this.handleopen}>trigger menu</button>          <modal show={this.state.ismenuopen} onhide={this.handleclose}>            <ul>              <li>this</li>              <li>is</li>              <li>the</li>              <li>menu!</li>            </ul>          </modal>        </div>      );    }  }    reactdom.render(<menu/>, document.getelementbyid('view'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.30.5/react-bootstrap.min.js"></script>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">  <div id="view"></div>


Comments

Post a Comment

Popular posts from this blog

asynchronous - C# WinSCP .NET assembly: How to upload multiple files asynchronously -

i using winscp .net assembly uploading files. want upload multiple files asynchronous way. have created method works single upload. public class uploadingdata { private sessionoptions _sessionoptions; private session _session; //connection etc private void onconnected() { foreach (var fileinfo in localfileslist) { var task = task.factory.startnew(() => uploadfilesasync(fileinfo)); } } private async task uploadfilesasync(string file) { string remotefilepath = _session.translatelocalpathtoremote(file, @"/", "/test_data_upload"); var uploading = _session.putfiles(file, remotefilepath, false); //when done await task.run(() => thread.sleep(1000)); } } please suggest me correct way. thanks you can use backgroundworker class this: string[] images = new string[50]; foreach (var path in images) { backgroundworker
Read more

aws api gateway - SerializationException in posting new Records via Dynamodb Proxy Service in API -

i getting "__type": "com.amazon.coral.service#serializationexception" as reply in postman & in test console in api gateway trying post record directly dynamodb using api proxy services.. referring aws article - https://aws.amazon.com/blogs/compute/using-amazon-api-gateway-as-a-proxy-for-dynamodb/ here's mapping { "tablename": "tablenamegoeshere", "item": { "id" : "$context.requestid" "eventname" : "$input.path('$.eventname')", "timestamp" : $input.path('$.timestamp'), "answers": "$util.parsejson($input.path('$.answers'))" } } update: did asked ... , worked if try add array of json objects gives me above same error - here's trying now. please - couldnt find on google well #set($inputroot = $input.path('$')) { "tablename": "answer", "item": {
Read more

asp.net - Problems sending emails from forum -

i have been redesigning site has message board, has been written guy looked after site. it has few problems , written in .asp , uses .mdb files database. you can see whole thing here . feel free post if helps, test thing have set using original files , new database. the basic problem when posts message, supposed email sent them, have posted it. when replies, originator supposed message, replier has been posted. i’d have thought @ point in process there should script/file in postmessage.asp? the postmessage.asp page below. <% option explicit %> <!-- #include virtual="common/adovbs.inc" --> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> <meta name="generator" content="microsoft frontpage 4.0"> <meta name="progid" content="frontpage.editor.document"> <title>new page 2</title> <base target="_self"
Read more