Before starting coding, just check that React, React.Dom libraries and Babel preprocessor have been installed.
Create a Simple Counter in a React Class component.
Before creating a Simple Counter in a React Functional component, let’s create it in a class component.
Steps to create a toggle element in a React Class component
- Install React locally or create a new pen on codepen.
- Create the HTML element onto render the component. Give it the id “counter”.
- Create a class component which extends React.Component. Name it Counter.
- Add the internal state in the constructor with this.state.
- Initialize the state count property at 0.
- Create a handler method named increment so when the decrement button is clicked, the counter value is increment by 1.
- Create a handler method named decrement so when the decrement button is clicked, the counter value is decrement by 1.
- Create a reset() method so when the reset button is clicked, the count is set to 0.
- Do not forget to add the necessary bindings for the created methods in the constructor.
- In the render, create the three buttons: Decrement, Increment and Reset.
- Add a className to every button and write a little bit of CSS (change the color of the background depending on the button, for example).
- Assign click handlers to trigger the appropriate method when the button is clicked.
- In the render, add a <p> element to display the current state count property value.
A Simple Counter React class component code
The final code of a Simple Counter in a React class component
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
this.increment = this.increment.bind(this);
this.decrement = this.decrement.bind(this);
this.reset = this.reset.bind(this);
}
increment() {
this.setState(state => ({count: state.count +1}))
};
decrement() {
this.setState(state => ({count: state.count -1}))
};
reset() {
this.setState(state => ({count: 0}))
};
render() {
return (
<div>
<button className=’decrement’ onClick={this.decrement}>Decrement</button>
<button className=’increment’ onClick={this.increment}>Increment</button>
<button className=’reset’ onClick={this.reset}>Reset</button>
<p>Current Count: {this.state.count}</p>
</div>
);
}
};
View the final code of simple counter in a React class component in a pen
See the Pen
React tricks: write a class component simple counter by Coding-Tricks (@coding-tricks)
on CodePen.
Create a Simple counter in a React Functional component with the hook useState
Let’s create this Simple Counter in a React.js functional component has been inspired by the Create a application with React.js published on the OpenClassrooms platform. Then we will create it in a way whose structure is closer to the newly-created one in a class component.
Steps to create a Simple Counter in a React Functional component
- Install React locally or create a new pen on codepen.
- Create the HTML element onto render the component. Give it the id “counter”.
- Import the useState hook at the beginning of the file
import { useState } from 'react';. Remark: when using codepen the import is not allowed, writeconst { useState } = React;instead. - Create a functional component named Counter.
- Add the initialState which equals 0 in constant at the top of the functional component. Remark: this variable is added because of the Reset button. If this button is not added to the counter there is no need to add it.
- Add the internal state with the useState() hook. Name it count, for example.
- Initialize the state at initialState (the newly-added constant) to be sure that the initial count value is 0 the first time the component is rendered. Remark: when there is no Reset button, 0 can be be directly declared in the useState().
- Create the updating function and name it updateCount. This function should modify the current state every time a button is clicked.
- In the return of the component function, add three button elements: Increment, Decrement and Reset. Remark: in the below code, I have replaced “Increment” by “+”, “Decrement” by “-“; that’s another possibility…
- Add a className to every button and write a little bit of CSS (change the color of the background depending on the button, for example).
- In the render, add the onClick attribute on the button element and call the updateCount function passing it count +1, count -1 or initialState to trigger the appropriate state modification when the button is clicked.
A Simple Counter React Functional component Code
The final code of a simple Counter in a react functional component
import { useState } from ‘react’;
function Counter() {
const initialState = 0;
const [count, updateCount] = useState(initialState);
return (
<div>
<button
id=”decrement”
className=”decrement”
onClick={() => updateCount(count – 1)}>
–
</button>
<button
id=”increment”
className=”increment”
onClick={() => updateCount(count + 1)}>
+
</button>
<button
id=”reset”
className=”reset”
onClick={() => updateCount(initialState)}>
Reset
</button>
<p> Count : {count}</p>
</div>
)
}
ReactDOM.render(<Counter />, document.getElementById(‘counter’));
View the final code of a Simple Counter in a react functional component in a pen
See the Pen
React tricks: write a simple counter with the hook useState by Coding-Tricks (@coding-tricks)
on CodePen.
Create a Simple counter in a React Functional component – another possibility
This second solution, closer to the class component structure, has been inspired by the following article.
Steps to create a Simple Counter in a React Functional component
- Install React locally or create a new pen on codepen.
- Create the HTML element onto render the component. Give it the id “counter”.
- Import the useState hook at the beginning of the file
import { useState } from 'react';. Remark: when using codepen the import is not allowed, writeconst { useState } = React;instead. - Create a functional component named Counter.
- Add the internal state with the useState() hook. Name it count, for example.
- Initialize the state at 0.
- Create the updating function and name it updateCount. This function should modify the current state every time a button is clicked.
- Create three functions below the useState() hook. Name them increment, decrement and reset. Call the updateCount function inside and modify the state passing it count +1, count -1 or 0 to trigger the appropriate state modification depending on the function name.
- In the return of the component function, add three button elements: Increment, Decrement and Reset. Remark: in the below code, I have replaced “Increment” by “+”, “Decrement” by “-“; that’s another possibility…
- Add a className to every button and write a little bit of CSS (change the color of the background depending on the button, for example).
- In the render, add the onClick attribute on the button element and call the corresponding function increment(), decrement() or reset() to trigger the appropriate state modification when the button is clicked.
A Simple Counter React Functional component Code
The final code of a simple Counter in a react functional component
const { useState } = React;
function Counter() {
const [count, updateCount] = useState(0);
const increment = () => {
updateCount(count => count + 1);
};
const decrement = () => {
updateCount(count => count – 1);
};
const reset = () => {
updateCount(0)
}
return (
<div>
<button
id=”decrement”
className=”decrement”
onClick={decrement}>
–
</button>
<button
id=”increment”
className=”increment”
onClick={increment}>
+
</button>
<button
id=”reset”
className=”reset”
onClick={reset}>
Reset
</button>
<p> Count : {count}</p>
</div>
)
}
ReactDOM.render(<Counter />, document.getElementById(‘counter’));
In conclusion
As a result, we can say that it is possible to create a Simple Counter either in a class or a functional React component. Obviously, the structures are different. Finally, it seems that the functional structure is shorter.
In the next episode, we will learn how to build a controlled input in a class component and… in a functional component!
comment
There is no comments. Leave the first one!