react bootstrap modal - how do I get it to show?

Question

I have a component in which I am importing reactBootstrap:

import ReactBootstrap from 'react-bootstrap'

Then I have a function in my component that's triggered when the user clicks a button:

onClickBtn : function() {
  var Modal = ReactBootstrap.Modal;
  return (
    <Modal>
      ... 
    </Modal>
  )
}

However, I get the error:

Uncaught TypeError : Cannot read property 'Modal' of undefined.

I am having trouble following the guide on react-bootstrap and I'm wondering if anyone knows how to easily import modal. Thanks

Solution

You can import any component directly from 'react-bootstrap' using the following es6 syntax:

import { Component } from 'react-bootstrap';

In this particular case, you can use:

import { Modal } from 'react-bootstrap';

You can also import multiple components at once, such as:

import { Button, ButtonToolbar, Modal } from 'react-bootstrap';

The need for { } is because these are not default exports, they are named exports that can be referred to by name.