Wasteland Wasteland - 11 months ago 134
React JSX Question

React-Bootstrap - importing modules

I'm trying to use react-bootstrap. See the code below. If I load individual modules (eg. Button, ButtonGroup, etc.), it works fine. I'd rather, however, import the whole ReactBootstrap (like in line 2 below) but then, it does not recognise elements like . How do I do it?

import React from 'react';
import ReactBootstrap from 'react-bootstrap';
import { Button } from 'react-bootstrap';
import { ButtonGroup } from 'react-bootstrap';
import { DropdownButton } from 'react-bootstrap';
import { MenuItem } from 'react-bootstrap';

const NavBar = (props) => {

return (
<Button bsStyle="success" bsSize="small">
<DropdownButton bsStyle="success" title="Dropdown">
<MenuItem key="1">Dropdown link</MenuItem>
<MenuItem key="2">Dropdown link</MenuItem>
<Button bsStyle="info">Middle</Button>
<Button bsStyle="info">Right</Button>


export default NavBar;

Thank you

Answer Source

react-bootstrap doesn't have a default export, so the default import syntax (import ReactBootstrap from 'react-bootstrap') cannot be used in this case. You can do the following though:

import * as ReactBootstrap from 'react-bootstrap';

<ReactBootstrap.Button bsStyle="success" bsSize="small">