Since I updated to the latest version of React and react-bootstrap this has not worked. Can someone help me understand why?
When view is changed by any means other than clicking on the toggle button the style does not show as checked.
It works as expected when clicked, but even when I explicitly set checked={true} within the ToggleButton component the button still does not show as checked unless it is clicked.
import React from "react";
import { ToggleButton, ToggleButtonGroup } from "react-bootstrap";
const SidebarMode = ({ view, setView }) => {
return (
<ToggleButtonGroup type="radio" name="modeSelect">
<ToggleButton
id="habitat"
variant="outline-secondary"
value="habitat"
checked={view === "habitat"}
onChange={(e) => setView(e.currentTarget.value)}
>
Visualize Habitat
</ToggleButton>
<ToggleButton
id="add"
variant="outline-secondary"
value="add"
checked={view === "add"}
onChange={(e) => setView(e.currentTarget.value)}
>
Import AOI
</ToggleButton>
<ToggleButton
id="view"
variant="outline-secondary"
value="view"
checked={view === "view"}
onChange={(e) => setView(e.currentTarget.value)}
>
Summarize AOI
</ToggleButton>
<ToggleButton
id="act"
variant="outline-secondary"
value="act"
checked={view === "act"}
onChange={(e) => setView(e.currentTarget.value)}
>
Take Actions
</ToggleButton>
</ToggleButtonGroup>
);
};
export default SidebarMode;EDIT:
Here's the package.json incase it's a version issue and not user error.
{
"name": "cvt1",
"version": "0.1.0",
"private": true,
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
"@fortawesome/react-fontawesome": "^0.2.0",
"@mapbox/mapbox-gl-draw": "^1.3.0",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^14.2.1",
"@turf/area": "^6.5.0",
"@turf/bbox": "^6.5.0",
"assert": "^2.0.0",
"axios": "^0.27.2",
"bootstrap": "^5.1.3",
"buffer": "^6.0.3",
"chart.js": "^3.8.0",
"deck.gl": "^8.8.4",
"i": "^0.3.7",
"mapbox-gl": "^2.9.2",
"npm": "^8.15.0",
"react": "^18.2.0",
"react-bootstrap": "^2.4.0",
"react-bootstrap-range-slider": "^3.0.8",
"react-chartjs-2": "^4.2.0",
"react-dom": "^18.2.0",
"react-draggable": "^4.4.5",
"react-dropzone": "^14.2.1",
"react-hamburger-menu": "^1.2.1",
"react-icons": "^4.4.0",
"react-map-gl": "^7.0.16",
"react-multi-switch-toggle": "^1.0.12",
"react-redux": "^8.0.2",
"react-resizable-element": "^0.1.5",
"react-router-dom": "^6.3.0",
"react-scripts": "^2.1.3",
"react-select": "^5.3.2",
"react-switch": "^7.0.0",
"react-tooltip": "^4.2.21",
"redux": "^4.2.0",
"redux-thunk": "^2.4.1",
"shpjs": "^4.0.2",
"start": "^5.1.0",
"uuid": "^8.3.2",
"viewport-mercator-project": "^7.0.4",
"worker-loader": "^3.0.8"
},