Wasteland Wasteland - 3 months ago 38
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 (
<div>
<Button bsStyle="success" bsSize="small">
Something
</Button>
<ButtonGroup>
<DropdownButton bsStyle="success" title="Dropdown">
<MenuItem key="1">Dropdown link</MenuItem>
<MenuItem key="2">Dropdown link</MenuItem>
</DropdownButton>
<Button bsStyle="info">Middle</Button>
<Button bsStyle="info">Right</Button>
</ButtonGroup>
</div>
)

}

export default NavBar;





Thank you

Answer

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">
  Something
</ReactBootstrap.Button>
Comments