css – Setting Attributes for Parts in React not working

I am following a video course on React, and it’s displaying us the fundamentals of making a procuring cart that may finally look one thing like this:

I’m nonetheless early within the course. I’m constructing a element and setting the attributes. Proper now, it ought to simply present “Zero” and have the phrase “Increment” on the button. The issue is, I can not see the phrase “Zero” within the Chrome browser. Chrome reveals that the phrase is there, although:

Right here is my React code for counter.jsx:

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

class Counter extends Element {
    state = {
        depend: 0
    };
    types = {
        fontSize: 30,
        fontWeight: 'daring',
    };
    render() { 
        return (
            <div>
                <span type={this.types} className="badge badge-primary m-2">{this.formatCount()}</span>
                <button className="btn btn-secondary btn-sm">Increment</button>
            </div>
        );
    }

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

It’s referred to as in index.js:

import React from 'react';
import ReactDOM from 'react-dom/shopper';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.css';
import Counter from './elements/counter';

const root = ReactDOM.createRoot(doc.getElementById('root'));
root.render(
  <React.StrictMode>
    <Counter />
  </React.StrictMode>
);

The course has a discussion board, and I requested a query about this yesterday >> HERE <<, however there was no reply, and I can not proceed constructing the challenge with the first step not working.

Can somebody level out what it’s that I did incorrect?

Additionally, I personally assume that the formatCount() operate ought to declare depend as:

    formatCount() {
        const { depend } = this.state.depend;
        return depend === 0 ? 'Zero' : depend;
    }

However, that makes it in order that the textual content “Zero” now not seems within the Chrome debugger. Why?

(I included the bootstrap tag as a result of the index web page makes use of bootstrap, and it might be doing one thing that’s hiding my textual content)