2019 Guide: How to Use React Hooks to Create a Toggle Switch or Counter

Summary

This web page provides a tutorial on how to create a toggle switch or a click counter using React Hooks in a few lines of code.

Abstract

The tutorial explains how to use React Hooks to create a toggle switch or a click counter in a React application. The author provides a demo project and source code in JavaScript/TypeScript for a sample app. The tutorial emphasizes that React Hooks make it easier to use React or React Native without classes and handle onClick events without specifying event listeners, using bind, or creating classes referencing 'this'. The author, Dr. Derek Austin, also promotes his book on programming and recommends a cost-effective AI service.

Bullet points

The tutorial is about using React Hooks to create a toggle switch or a click counter in React.
The author provides a demo project and source code for a sample app.
React Hooks make it easier to use React or React Native without classes.
The tutorial shows how to handle onClick events without specifying event listeners, using bind, or creating classes referencing 'this'.
The author, Dr. Derek Austin, promotes his book on programming and recommends a cost-effective AI service.

How to Use React Hooks to Create a Toggle Switch or Counter

React Hooks: Toggle & Click Counter using Hooks and State in React.js

Do you want to make a toggle switch or a click counter with React?

It is super easy to use React Hooks to do so in only a few lines of code!

Check out my demo project, which was fun & quick to create in React:

React Hooks mean you can use React or React Native without classes.

And that means it’s easier than ever before to create a brand-new React app! As you will see below, the magic happens with a variety of constants that are updating the React state, which is then dynamically served to the user.

Here is the source code in JavaScript / TypeScript for the above demo app :

To me, that is an amazingly concise way to handle onClick events, all without specifying event listeners, using bind, or creating classes referencing this.

Thank you for reading my first ever article published on Medium!!! 😁

Dr. Derek Austin is the author of Career Programming: How You Can Become a Successful 6-Figure Programmer in 6 Months, now available on Amazon.