0

I have below code in component class. When I am rendering it, dropdown doesnt shot the values in menuitem. What am I missing here. Thanks in advance. 

import { FormGroup, DropdownButton, MenuItem} from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.css";

export default class abc extends React.Component{
    render() {
        return (
            <form >
                <FormGroup controlId="selection" bsSize="large">
                    <label htmlFor="lblModelSelection"><b>Select</b></label>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <DropdownButton id="lblSelection" title="--Select--">
                        <MenuItem >abc</MenuItem>
                        <MenuItem >pqr</MenuItem>
                        <MenuItem >xyz</MenuItem>
                    </DropdownButton>
                </FormGroup>
            </form>
        )
    }
}
Nilesh
  • 518
  • 1
  • 9
  • 26

2 Answers2

1

When I run your code, there's an error saying Attempted import error: 'MenuItem' is not exported from 'react-bootstrap'. It seems MenuItem is no longer a component in the react-bootstrap library. See the official documentation for react-bootstrap: https://react-bootstrap.github.io/components/dropdowns/

Also, you would want to capitalize your component name. So instead of abc, your component would be Abc . (For more details, check ReactJS component names must begin with capital letters?)

The following code works for me now.

import React from 'react';
import { Form, FormGroup, Dropdown } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.css";

export default class Abc extends React.Component {
    render() {
        return (
            <Form>
                <FormGroup controlId="selection" bsSize="large">
                    <label htmlFor="lblModelSelection"><b>Select</b></label>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                    <Dropdown>
                        <Dropdown.Toggle variant="success" id="dropdown-basic">
                            Select
                        </Dropdown.Toggle>

                        <Dropdown.Menu>
                            <Dropdown.Item>abc</Dropdown.Item>
                            <Dropdown.Item>pqr</Dropdown.Item>
                            <Dropdown.Item>xyz</Dropdown.Item>
                        </Dropdown.Menu>
                    </Dropdown>
                </FormGroup>
            </Form>
        )
    }
}
ironfist
  • 21
  • 1
  • 4
  • After copying above code, program compiled successfully, but in console I am getting 7 errors. Error is -The above error occurred in the
      component: in ul (created by DropdownMenu) in RootCloseWrapper (created by DropdownMenu) in DropdownMenu (at ModelSelectionComponent.js:37) in div (created by ButtonGroup) in ButtonGroup (created by Dropdown) in Dropdown (created by Uncontrolled(Dropdown)) in Uncontrolled(Dropdown) (at ModelSelectionComponent.js:33) in div (created by FormGroup) in FormGroup
     – Nilesh Mar 27 '20 at 15:18
  • Sorry, no idea for now. Only found this link with similar issues. It remains unresolved but I think it gives direction as to where it went wrong. https://stackoverflow.com/questions/59680413/react-bootstrap-dropdown-compatibility-with-webpack-and-babel – ironfist Mar 27 '20 at 15:27
  • No errors for me in the console. Perhaps some compatibility issues with your set up? – ironfist Mar 27 '20 at 15:34
0

you can just add the option show like this :

<Dropdown ... show={true}>

for more information here is the documentation: https://react-bootstrap.github.io/components/dropdowns/#dropdown-props

rapaelec
  • 1,238
  • 12
  • 10