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>