Issue
Right now I'm learning how to use ReactJS and for some reason, my bootstrap isn't working in my .jsx file. I'm following a tutorial (MOSH) I followed everything to the T and even searched all over stack overflow, nothing. Someone had the same problem as me and they fixed it by importing CSS. I try to do the same but nothing. I'm trying to get a badge right next to a button, the button shows but the badge doesn't display. I even tried installing bootstrap multiple times and no dice.
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;
Solution
The problem I've noticed is you have used an incorrect bootstrap class name for the badge because probably you'd have installed the latest version of bootstrap (bootstrap v5.1). Your badge will work on older bootstrap versions(v4.6). So to resolve the issue try using: className = "badge bg-primary"
or else you have to downgrade the bootstrap version.
- bootstrap v5.1:
<span className = "badge bg-primary"></span>
- bootstrap v4.6(or below):
<span className = "badge badge-primary"></span>
Please follow the below links for documentation of bootstrap v5.1 & v4.6:
- v5.1: Badges v5.1
- v4.6: Badges v4.6
Additionally, I ran your code and did not get the expected functionality: Here I suggest a simpler method for a counter:
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import Counter from './Counter.jsx';
ReactDOM.render(<Counter />, document.getElementById('root'));
Counter.jsx
import React, { useState } from "react";
function Counter(){
let [count, setCount] = useState(0);
return (
<div className="container">
<span className = "badge bg-primary">{formatCount()}</span>
<button className="btn btn-success" onClick ={increase}>Increment</button>
</div>
);
function increase(){
setCount(count + 1);
}
function formatCount(){
return (count === 0 ? 'Zero' : count);
}
}
export default Counter;
I've added an additional bootstrap class for the button & custom CSS to center the components:
styles.css:
.container {
text-align: center;
margin: 20% auto;
}
Answer to your styling problem.
- Use the ternary operator to select a bootstrap class based on the value of "count". It'll select bootstrap class "badge bg-warning" or "badge bg-primary" Depending on whether count equals 0 or count not equals 0.
Counter.jsx
import React, { useState } from "react";
function Counter(){
let [count, setCount] = useState(0);
return (
<div className="container">
<span className = {count === 0 ? "badge bg-warning" : "badge bg-primary"}>{formatCount()}</span>
<button className="btn btn-success" onClick ={increase}>Increment</button>
</div>
);
function increase(){
setCount(count + 1);
}
function formatCount(){
return (count === 0 ? 'Zero' : count);
}
}
export default Counter;
- Other codes remain the same as previous.
Please refer to the following links:
- React conditional renderingConditional rendering
- Ternary operatorTernary operator
- Hooks vs class componentsHooks
- Intro to hooks Intro to hooks
Answered By - Santhusha Thennakoon
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.