Cannot use react bootstrap with class component - css

Question

I have a class component that I am trying to style the elements, the buttons, textboxes etc. To those ends I followed this link https://react-bootstrap.github.io/getting-started/introduction to install bootstrap in my react then i have import Button from 'react-bootstrap/Button'; and import 'bootstrap/dist/css/bootstrap.min.css'; in my header.
.
If I use <button type="submit">Submit</button> I notice that my button has no style at all and looking at examples I see everyone using <Button bsStyle="primary" bsSize="large" disabled>Test</Button> except that, when I do I get the error Error: Invalid hook call. Hooks can only be called inside of the body of a function component. Since I am using a class component, does that mean I have to rewrite the entire thing to a function? But also I see the example on this link https://www.golangprograms.com/how-to-use-react-bootstrap-component.html using a class.
Appreciate if I be assisted in this regard.
Regards
import React, { Component } from 'react'
import Button from 'react-bootstrap/Button';
import 'bootstrap/dist/css/bootstrap.min.css';
class Transport extends Component {
constructor(props) {
super(props)
this.state = {
dieselTxt: '',
electricTxt: '',
gasolineTxt: '',
vehMaintain: '',
gasolineCarbon:''
}
}
handDieselChange = (event) => {
this.setState({
dieselTxt: event.target.value
})
}
handElectricChange = (event) => {
this.setState({
electricTxt: event.target.value
})
}
handGasTxtChange = (event) => {
this.setState({
gasolineTxt: event.target.value
})
}
handBusTxtChange = (event) => {
this.setState({
BusTxt: event.target.value
})
}
handTrainTxtChange = (event) => {
this.setState({
trainTxt: event.target.value
})
}
handFlightTxtChange = (event) => {
this.setState({
flightTxt: event.target.value
})
}
handVenSelectChange = (event) => {
this.setState({
vehMaintain: event.target.value
})
}
vehiclesCarbon = (event) => {
alert("test");
if (`${this.state.vehMaintain}` === '1') {
//` 22 / miles per galon(21.6) )* EF_passenger_vehicle*(nonCO2_vehicle_emissions_ratio)`
const estLBCarbonGas = ((this.state.gasolineTxt / 21.6) * 19.6* 1.01).toFixed(0);
this.setState({ gasolineCarbon: estLBCarbonGas })
}
event.preventDefault()
}
render() {
const { dieselTxt, electricTxt, gasolineTxt, vehMaintain, gasolineCarbon,trainTxt, BusTxt, flightTxt } = this.state
return (
<div>
<h4>Enter your vehicle's yearly milage</h4>
<form onSubmit={this.handleSubmit}>
<div>
<label>Gasoline </label>
<input type="text"
value={gasolineTxt}
onChange={this.handGasTxtChange}
/>
</div>
{/* <div>
<label>Diesel</label>
<input type="text"
value={dieselTxt}
onChange={this.handDieselChange}
/>
</div>
<div>
<label>Electric</label>
<input type="text"
value={electricTxt}
onChange={this.handElectricChange}
/>
</div> */}
<div>
<label>Do you perform regular maintenance on your vehicle?</label>
<select value={vehMaintain}
onChange={this.handVenSelectChange}>
<option value=""></option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
</div>
<div>
<input type="text"
value={gasolineCarbon}
/>
</div>
{/* <p>Public Transporation</p>
<div>
<label>Bus </label>
<input type="text"
value={BusTxt}
onChange={this.handBusTxtChange}
/>
</div>
<div>
<label>Train </label>
<input type="text"
value={trainTxt}
onChange={this.handTrainTxtChange}
/>
</div>
<p>Air Travel</p>
<div>
<label>Flights </label>
<input type="text"
value={flightTxt}
onChange={this.handFlightTxtChange}
/>
</div> */}
<div>
<button onClick={this.vehiclesCarbon}>Test</button>
<Button bsStyle="primary" bsSize="large" disabled>
Primary button
</Button>
</div>
</form>
</div>
)
}
}
export default Transport
Tab
import { useState } from "react";
import EnergyConsum from "./EnergyConsum";
import Transport from "./Transport";
import WasteForm from "./WasteForm";
//import "./App.css";
function Tabs() {
const [toggleState, setToggleState] = useState(1);
const toggleTab = (index) => {
setToggleState(index);
};
return (
<div className="container">
<div className="bloc-tabs">
<button
className={toggleState === 1 ? "tabs active-tabs" : "tabs"}
onClick={() => toggleTab(1)}
>
Energy Consumption
</button>
<button
className={toggleState === 2 ? "tabs active-tabs" : "tabs"}
onClick={() => toggleTab(2)}
>
Transport
</button>
<button
className={toggleState === 3 ? "tabs active-tabs" : "tabs"}
onClick={() => toggleTab(3)}
>
Tab 3
</button>
</div>
<div className="content-tabs">
<div
className={toggleState === 1 ? "content active-content" : "content"}
>
<h5>How much energy do you consume</h5>
<hr />
<EnergyConsum />
</div>
<div
className={toggleState === 2 ? "content active-content" : "content"}
>
<h2>How do you get around</h2>
<hr />
<Transport />
</div>
<div
className={toggleState === 3 ? "content active-content" : "content"}
>
<h2>Content 3</h2>
<hr />
<WasteForm />
</div>
</div>
</div>
);
}
export default Tabs;
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
Full Error Message
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
▶ 21 stack frames were collapsed.
Module.<anonymous>
H:/Documents/Projects/Solidity/MYCFC/my-cfc/src/index.js:8
5 | import reportWebVitals from './reportWebVitals';
6 |
7 |
> 8 | ReactDOM.render(
9 | <React.StrictMode>
10 | <App />
11 | </React.StrictMode>,
View compiled
Module../src/index.js
http://localhost:3001/static/js/main.chunk.js:2365:30
__webpack_require__
H:/Documents/Projects/Solidity/MYCFC/my-cfc/webpack/bootstrap:856
853 |
854 | __webpack_require__.$Refresh$.init();
855 | try {
> 856 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 857 | } finally {
858 | __webpack_require__.$Refresh$.cleanup(moduleId);
859 | }
View compiled
fn
H:/Documents/Projects/Solidity/MYCFC/my-cfc/webpack/bootstrap:150
147 | );
148 | hotCurrentParents = [];
149 | }
> 150 | return __webpack_require__(request);
| ^ 151 | };
152 | var ObjectFactory = function ObjectFactory(name) {
153 | return {
View compiled
1
http://localhost:3001/static/js/main.chunk.js:2501:18
__webpack_require__
H:/Documents/Projects/Solidity/MYCFC/my-cfc/webpack/bootstrap:856
853 |
854 | __webpack_require__.$Refresh$.init();
855 | try {
> 856 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 857 | } finally {
858 | __webpack_require__.$Refresh$.cleanup(moduleId);
859 | }
View compiled
checkDeferredModules
H:/Documents/Projects/Solidity/MYCFC/my-cfc/webpack/bootstrap:45
42 | }
43 | if(fulfilled) {
44 | deferredModules.splice(i--, 1);
> 45 | result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
| ^ 46 | }
47 | }
48 |
View compiled
Array.webpackJsonpCallback [as push]
H:/Documents/Projects/Solidity/MYCFC/my-cfc/webpack/bootstrap:32
29 | deferredModules.push.apply(deferredModules, executeModules || []);
30 |
31 | // run deferred modules when all chunks ready
> 32 | return checkDeferredModules();
| ^ 33 | };
34 | function checkDeferredModules() {
35 | var result;
View compiled
(anonymous function)
http://localhost:3001/static/js/main.chunk.js:1:65