Currently, I am in the process of learning ReactJS and running into an issue where my bootstrap is not working within my .jsx file. Despite following a tutorial (MOSH) diligently and extensively researching on stack overflow, I have not been able to find a solution. I came across someone with a similar problem who resolved it by importing CSS. I attempted to do the same but to no avail. My goal is to display a badge next to a button, however, the button shows up but the badge does not. Additionally, I've tried reinstalling bootstrap multiple times without success.
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import Counter from './components/counter';
ReactDOM.render(<Counter />, document.getElementById('root'));
reportWebVitals();
counter.jsx:
import React, { Component } from "react";
class Counter extends Component {
state = {
count: 0,
};
render() {
return (
<div>
<span className = "badge badge-primary">{this.formatCount()}</span>
<button>Increment</button>
</div>
);
}
formatCount(){
const {count} = this.state;
return count === 0 ? 'Zero' : count;
}
}
export default Counter;