React Components 6-Setting Attributes

React
1

I am trying to get through the Components video in React. My file counter.jsx is:

import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.css';

class Counter extends Component {
    state = {
        count: 0
    };
    styles = {
        fontSize: 30,
        fontWeight: 'bold',
    };
    render() { 
        return (
            <div>
                <span style={this.styles} className='badge badge-primary m-2'>{this.formatCount()}</span>
                <button className='btn btn-secondary btn-sm'>Increment</button>
            </div>
        );
    }

    formatCount() {
        const { count } = this.state;
        return count === 0 ? 'Zero' : count;
    }
}
 
export default Counter;

The code is like in the video, but my “Zero” button does not appear. It is still visible in the Element tab.

How do I get my text to show like in the course? It should really cover how to debug issues, because they happen!

image
image810×339 22.3 KB

2

Hi, Do you have any message in the console?

3

No, but I figured it out. The bootstrap I loaded is not the same as the bootstrap that is used in the book (4 years old). In the newer bootstrap, the CSS for the button is not colored like it is in the example course.

4 
className='badge badge-primary m-2'

in the latest bootstrap, I don’t find a badge-primary class but bg-primary

see bootstrap doc Badges · Bootstrap v5.0

1 Like
5

@onlyhasbi - that was a good find! Thanks