How to get dropdown-button working in react bootstrap?

Question

I am using react-bootstrap and am using the dropdownbutton component. This for some reason does not render. I am unable to figure it out. Any help will be appreciated. It basically does not show up. I also wanted to know if I am getting the value of the dropdownbutton the correct way. By the way I have also imported href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" in the index file.

import {Component} from "react";
import fetch from "isomorphic-fetch";
import AddOnList from "./AddOnList";
import DebounceInput from "react-debounce-input";
import { DropdownButton } from 'react-bootstrap';
import { MenuItem } from 'react-bootstrap';


export default class AddOnSearch extends Component {

    constructor(props) {
        super(props);
        this.state = {};
    }

    componentDidMount() {
        fetch('/api/v1/addon')
            .then(response => {
                return response.json();
            })
            .then(json => {
                this.setState({allAddOns: json});
            })
    }

    setType(type) {
        this.setState({
            type: type,
            searchResults: null
        }, this.doSearch);

    }

    setQuery(query) {
        this.setState({
            query: query,
            searchResults: null
        }, this.doSearch);
    }

    doSearch() {
        if (this.state.type || this.state.query) {
            var url = "/api/v1/addon?";
            if (this.state.type) {
                url += "type=" + this.state.type;
            }
            if (this.state.query) {
                url += "&q=" + this.state.query;
            }
            fetch(url)
                .then(response => {
                    return response.json();
                })
                .then(json => {
                    this.setState({searchResults: json});
                });
        }
    }

    render() {
        return (
            <div className="row col-md-12 col-sm-12 col-xs-12 pushdown">
                <div className="col-lg-12">
                    <div className="input-group">

                        <div className="input-group-btn">
                            <DropdownButton className="dropdown-menu" onSelect={event => this.setType(event.target.eventKey)}>
                              <MenuItem eventKey="">All Types</MenuItem>
                              <MenuItem eventKey="OMOD">Module (OMOD)</MenuItem>
                              <MenuItem eventKey="OWA">Open Web App (OWA)</MenuItem>
                            </DropdownButton>
                        </div>

                        <DebounceInput
                            placeholder="Search..."
                            className="form-control"
                            minLength={1}
                            debounceTimeout={500}
                            onChange={event => this.setQuery(event.target.value)}
                        />

                    </div>
                </div>

                { (this.state.query || this.state.type) ?
                    <AddOnList addons={this.state.searchResults}/>
                    :
                    <AddOnList addons={this.state.allAddOns}/>
                }
            </div>

        )
    }
}

Do you have jquery in your project? I think bootstrap (and react-bootstrap by extension) use that. — stinodes, Feb 09 '17 at 13:38
React bootstrap definitely doesn't use jquery. It is the js functions from bootstrap rebuilt in a react way. Not sure if this is the issue but try importing everything in one go `import { DropdownButton, MenuItem } from 'react-bootstrap';` — spirift, Feb 09 '17 at 14:50
Also just noticed that you aren't importing React at the top. You have to import React every time you want to create a component, not just `Component`. That would look like `import React, { Component } from 'react';` — spirift, Feb 09 '17 at 14:58

score 2 · Accepted Answer · answered Sep 24 '17 at 19:42

2

I solved the issue by installing react-bootstrap using npm. This basically is the crux of react-bootstrap(It contains the scripts written using reactjs) which I had forgotten to install.

answered Sep 24 '17 at 19:42

Reuben_v1

714
2
7
20

score 1 · Answer 2 · answered Feb 20 '17 at 15:15

The react-bootstrap-table table (ver 2) depends on both jQuery and bootstrap so you must include both of them to make sure it will work.

Option #1:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Option #2

(if you want to use es6's import to make sure npm & webpack handle the versioning for you):

inside package.json:

  "dependencies": {
    ....
    "bootstrap": "^3.0.0",
    "jquery": "^2.0.0"
  },

inside your webpack config:

  plugins: options.plugins.concat([
    ...

    new webpack.ProvidePlugin({
        jQuery: 'jquery',
        $: 'jquery',
        jquery: 'jquery'
    }),
  ])

Now inside your component you can use:

import $ from 'jquery';
import 'bootstrap/dist/js/bootstrap.min.js';

And everything should work as expected

Thanks but I solved the issue by installing react-bootstrap using npm. This basically is the crux of react-bootstrap(It contains the scripts written using reactjs) which I had forgotten to install — Reuben_v1, Feb 21 '17 at 05:13
A quick hack, not using webpack and Gatsby, is to do `npm install popper.js --save` and `npm i -S jquery` and then use the `import(s)` inside the `bootstrap.min.js` — Mark, Nov 15 '17 at 11:06

How to get dropdown-button working in react bootstrap?

2 Answers2

Option #1:

Option #2

Linked