React Bootstrap Refusing to Render

Question

I'm using React-Bootstrap to render a button group as an example, but it's refusing to render, and is instead telling me "ButtonGroup is undefined". I've installed the module via NPM and have imported it using ES6 (translated by babel). I'm exporting my components, to then eventually be rendered in my app as children.

import React, { Component, PropTypes } from 'react';
import Bootstrap from 'react-bootstrap';

export default class NavBar extends Component {
    render(){

    return(
     <Bootstrap.ButtonGroup>
    <Bootstrap.Button>1</Bootstrap.Button>
    <Bootstrap.Button>2</Bootstrap.Button>
    <Bootstrap.DropdownButton title="Dropdown" id="bg-nested-dropdown">
      <Bootstrap.MenuItem eventKey="1">Dropdown link</Bootstrap.MenuItem>
      <Bootstrap.MenuItem eventKey="2">Dropdown link</Bootstrap.MenuItem>
    </Bootstrap.DropdownButton>
  </Bootstrap.ButtonGroup>
    );
  }
}

cwbutler · Accepted Answer · 2017-03-08 16:47:08Z

4

There is a special way to import using ES6 based on the docs for 'react-bootstrap':

https://react-bootstrap.github.io/getting-started.html#es6

Es6 modules aren't supported natively yet, but you can use the syntax now with the help of a transpiler like Babel.

import Button from 'react-bootstrap/lib/Button';
// or
import { Button } from 'react-bootstrap';

answered Mar 8, 2017 at 16:47

cwbutler

1,2609 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Zachary Blumstein · Accepted Answer · 2019-10-17 17:53:26Z

0

you also will want to bring in ButtonGroup from the react-bootstrap library like this.

import Button from 'react-bootstrap/lib/Button';
import ButtonGroup from 'react-bootstrap/lib/ButtonGroup';
// or
import { Button, ButtonGroup } from 'react-bootstrap';

answered Oct 17, 2019 at 17:53

Zachary Blumstein

3252 silver badges11 bronze badges

Collectives™ on Stack Overflow

React Bootstrap Refusing to Render

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related