perryf / react-bootstrap-bug Goto Github PK

	"dependencies": {
		"bootstrap": "^4.6.0",
		"react": "^17.0.1",
		"react-app-polyfill": "^2.0.0",
		"react-bootstrap": "^1.4.3",
		"react-dom": "^17.0.1",
		"react-scripts": "^4.0.2"
	}

import 'react-app-polyfill/ie11' // For IE 11 support
import 'react-app-polyfill/stable'
import React from 'react'
import ReactDOM from 'react-dom'
import 'bootstrap/dist/css/bootstrap.min.css'
import App from './App'
import './index.css'

ReactDOM.render(
	<React.StrictMode>
		<App />
	</React.StrictMode>,
	document.getElementById('root')
)

import React, { useState } from 'react'
import { Button, Modal, DropdownButton, Dropdown } from 'react-bootstrap'
const App = () => {
	const [showModal, setShowModal] = useState(false)

	const handleClose = () => setShowModal(false)
	const handleShow = () => setShowModal(true)

	return (
		<div>
			<h1>Dropdown Test</h1>
			<Button onClick={handleShow}>Open Modal</Button>

			<DropdownButton
				id="dropdown-test"
				title="Dropdown Button"
				variant="secondary"
			>
				<Dropdown.Item>1</Dropdown.Item>
				<Dropdown.Item>2</Dropdown.Item>
				<Dropdown.Item>3</Dropdown.Item>
			</DropdownButton>

			<Modal show={showModal} onHide={handleClose} backdrop="static">
				<Modal.Header>Hiya!</Modal.Header>
				<Modal.Body>
					<Button onClick={handleClose}>Close</Button>
				</Modal.Body>
			</Modal>
		</div>
	)
}

export default App