Counter Composant in React - Javascript

In React, a Counter Component is a simple and very useful tool. It displays a number that increments or decrements each time a button is clicked. It is used in many applications, from simple counters on websites to complex timers in games and user interfaces.

Creating a Counter Component in React

To create a Counter Component in React, we first need to import React and create useState hook.

import React, { useState } from 'react';

Next, we will create the Counter Component:

const Counter = () => {

    const [count, setCount] = useState(0);

    const handleIncrement = () => {
        setCount(count + 1)
    }

    const handleDecrement = () => {
        setCount(count - 1)
    }

    return (
        <div>
            <h2>Current Count: {count}</h2>
            <button onClick={handleIncrement}>Increment</button>
            <button onClick={handleDecrement}>Decrement</button>
        </div>
    )
}

Here, we use the useState hook to create a count variable which starts at 0, and a setCount function which updates the count variable.

We then create two functions handleIncrement and handleDecrement which use setCount to change the count variable accordingly.

Finally, we return a JSX element which displays the current count and two buttons to increment or decrement it.

Using the Counter Component

To use the Counter Component, simply import it into your React application and render it:

import React from 'react';
import Counter from './Counter';

const App = () => {
  return (
    <div>
      <Counter />
    </div>
  )
}

export default App;

Here we import the Counter component we created earlier and render it in our App component.

We can now see the Counter in action by starting our React application and clicking the increment and decrement buttons.

Conclusion

The Counter Component is a simple yet powerful tool in React that we can use to add interactivity to our web pages and applications. Its ease of use and versatility make it a great starting point for anyone learning React.