{this.formatCount()}
1 Like
please show us the full code.
Thanks!
{this.formatCount()}
Increment
{this.formatCount()}
Increment
import React, { Component } from ‘react’;
class Counter extends Component {
state = {
count :0
};
render() {
return(
{this.formatCount()}
Increment
);
}
getBadgeClasses() {
let classes = "badge m-2 badge-";
classes += this.state.count === 0 ? "warning" : "primary";
return classes;
}
formatCount(){
const {count}= this.state;
return count === 0 ? ‘Zero’ : count;
}
}
export default Counter;
{this.formatCount()}
Increment
Please use backtick characters to format the code or simply use the code block inserter in the editor to insert the code.
Backtick: the symbol just ahead of the ‘1’ in your keyboard.
Code inserter block: click on this symbol: </> in the editor.
import React, { Component } from ‘react’;
class Counter extends Component {
state = {
count :0
};
getBadgeClasses() {
let classes = "badge m-2 badge-";
classes += this.state.count === 0 ? "warning" : "primary";
return classes;
}
formatCount(){
const {count} = this.state;
return count === 0 ? 'Zero' : count;
}
render() {
return(
<button className="btn btn-primary">
<span className={this.getBadgeClasses()}>{this.formatCount()}</span> Increment
</button>
);
}
}
export default Counter;
Try to execute this snippet and let me know if this is what you intended or not.
Problems:
-
In the render() method, you must return a react element (this is typically a html element like ‘div’, ‘button’, … but there you can use JavaScript as well).
-
So, either return
nullor a react element in your render() method.
Thank you for your quick response. But your code didn’t work as well. In the lectures the style was changed for the count variable yellow when it is zero and blue otherwise but it is not doing that in my code . Could it be a problem in the bootstrap ?.
Thanks
| maverick
January 4 |
- | - |
Please use backtick characters to format the code or simply use the code block inserter in the editor to insert the code.
Backtick: the symbol just ahead of the ‘1’ in your keyboard.
Code inserter block: click on this symbol: </> in the editor.
import React, { Component } from ‘react’;
class Counter extends Component {
state = {
count :0
};
getBadgeClasses() {
let classes = "badge m-2 badge-";
classes += this.state.count === 0 ? "warning" : "primary";
return classes;
}
formatCount(){
const {count} = this.state;
return count === 0 ? 'Zero' : count;
}
render() {
return(
<button className="btn btn-primary">
<span className={this.getBadgeClasses()}>{this.formatCount()}</span> Increment
</button>
);
}
}
export default Counter;
Try to execute this snippet and let me know if this is what you intended or not.
Problems:
-
In the render() method, you must return a react element (this is typically a html element like ‘div’, ‘button’, … but there you can use JavaScript as well).
-
So, either return
nullor a react element in your render() method.
Yes, that’s is where the problem might be.
Show me any console errors.
Show me how you linked bootstrap (css) file in your app (component).
Hi again
I just put this statement in index.js
import ‘bootstrap/dist/css/bootstrap.css’;
that is all . Should I add anything more ?
Thanks
Yes, that should have worked.
Push your code to public Git repo, I will look into it and update you.
Hi again
I am not very good in github but i loaded my files to https://github.com/suheiromari/test-repository3
Please tell me if any file is missing.
Thanks again very much
Based on your GitHub repository, follow these steps to get your application up and running:
this is what your project directory should look like:
Note: there will be other files in those directories but I am just listing what you need. I am also assuming you are using latest version of ReactJS which is V18.+
/project-name
/public
/src
/components
counter.jsx
index.js
...
Note: here I am assuming the ‘counter.jsx’ file will be either in ‘/components’ directory or it will be moved there by you if it’s not there already.
Update the code for ‘index.js’ with the code below:
import React from 'react';
import ReactDOM from 'react-dom/client';
import Counter from './components/counter';
import 'bootstrap/dist/css/bootstrap.css';
import './index.css';
// Note here: if the ReactJS version is latest, uncomment following code and comment out the last line (i.e., ReactDOM.render().
/*
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Counter />
</React.StrictMode>
);
*/
// If the ReactJS version is older, do nothing:
ReactDOM.render(<Counter />, document.getElementById('root'));
That is all you need to do to make your application run.
Again, make sure you have a ‘components’ folder inside ‘src’ folder and there is a ‘counter.jsx’ file as well.
Good Luck!
Hi
I would like to thank you for your help. It is running normally now . I had a problem in windows theme and I corrected it and it is running normally now.
Thanks for your help
Suheir El Omari
January 5 |
- | - |
Based on your GitHub repository, follow these steps to get your application up and running:
this is what your project directory should look like:
Note: there will be other files in those directories but I am just listing what you need. I am also assuming you are using latest version of ReactJS which is V18.+
/project-name
/public
/src
/components
counter.jsx
index.js
...
Note: here I am assuming the ‘counter.jsx’ file will be either in ‘/components’ directory or it will be moved there by you if it’s not there already.
Update the code for ‘index.js’ with the code below:
import React from 'react';
import ReactDOM from 'react-dom/client';
import Counter from './components/counter';
import 'bootstrap/dist/css/bootstrap.css';
import './index.css';
// Note here: if the ReactJS version is latest, uncomment following code and comment out the last line (i.e., ReactDOM.render().
/*
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Counter />
</React.StrictMode>
);
*/
// If the ReactJS version is older, do nothing:
ReactDOM.render(<Counter />, document.getElementById('root'));
That is all you need to do to make your application run.
Again, make sure you have a ‘components’ folder inside ‘src’ folder and there is a ‘counter.jsx’ file as well.
Good Luck!
Even though your code work it’s not a recommended way of doing
1). Your react app is not on strict mode
2). Your app don’t have main/root component