How to create a character counter in React.js
React.js is a framework built on the JavaScript programming language to make web apps. This framework, in conjunction with Node.js, allows for the use of JavaScript on the full stack.
States
In most cases, a React state can be thought of a lot like a variable in JavaScript. The difference is that when a state is changed on the server, that change is automatically sent to the browser, without the client’s need to refresh.
Counting the characters in a string is a simple task that can be done using plain JavaScript. In JS, a string has a length property that will return the number of characters in the string.
var string = “Some Text”
var string_length = string.length
console.log(string_length)
#expected output: 9
While this method is extremely easy, it doesn’t allow for much control over what is specifically counted.
Count characters without spaces in JavaScript
The above method will count spaces as characters, what if you wanted to skip spaces?
In JavaScript there is a very useful function called split(), that can allow you to achieve this. For example, you can remove the spaces from the original string, and count the length of that new string.
var string = 'Some Text'
var string_length = string.split(“ ”).length
console.log(string_length)
#expected output: 8
The split function can remove all instances of the given string from the original string. In this particular example we provide a single space as a parameter for the split function. This removes all spaces from the string, at which point we can use the length value to determine exactly how many characters are left, without the spaces.
Using the filter function in JavaScript
Another option if you want to count how many of a specific character exist in a string, is the filter function. The filter functionality is a little less straightforward, being that it will not work on a normal string and for a parameter it takes in another function, however this particular implementation should be easy to replicate.
var string = “Some Text”
var string_length = [...string].filter(x => x === ‘t’).length
console.log(string_length)
#expected output: 1
In the above example we count the number of occurrences of the letter t in the string. Firstly, the filter function must be applied to an array. This is why the string is represented like [...string], which will convert any string into a character by character array.
Also the filter function takes in another function as a parameter, which in the example we’ve represented as an arrow function. Replace the ‘t’ with the desired character or string you wish to find within the original.
In all of the previous examples, the searching is done in a case sensitive manner. Maybe you want to count how many times a character appears whether or not it is upper or lowercase. You could just count separately for lowercase and capital variants of whatever characters you want, and add them yourself, but a much simpler method is to simply convert the entire string to the same case (upper or lower) and count it then.
var string = “Some Text”
var string_length = [...string.toLowerCase()].filter(x => x === ‘t’).length
console.log(string_length)
#expected output: 2
Now that we have a robust set of JavaScript tools we can use to count our strings, it’s time to talk about how this can be implemented in React.
Using React to count characters
As React does use JavaScript, it will allow for you to write and run this code without any modification, however if you are making a React app, instead of printing the output of the count, it is likely you will want to use it to dynamically modify something on the client side.
You may have noticed in every example up until this point, only one line is different in each one. The second line.
For our React example, we will be changing the other lines, and the variable string_length will be plugged in. We will be using the useState hook from React, so make sure to include the import statement below at the top of your code.
import { useState } from React
const [string_length, set_string_length] = useState(0)
function countString() {
var string = document.getElementById(‘text_input”).value
#####only choose one of these next 4 lines#####
set_string_length(string.length)#count
set_string_length(string.split(“ ”).length) #count ignoring spaces
set_string_length([...string].filter(x => x === ‘t’).length)#search and count
set_string_length([...string.toLowerCase()].filter(x => x === ‘t’).length)
}
<div>
<input id=”text_input”></input>
<button onClick = {countString}></button>
</div>
<h1>{string_length}</h1>
The above example is a simple app that takes in user input in the form of a string, and when the button is pressed, it counts the given string, and shows that count to the user via the h1 tag.
The first line is an import statement that gives us control over React’s useState hook which should make using states look a little cleaner.
The next line is where we declare our state, the first value within the brackets is a getter, and the other is a setter. You can access the getter just like a normal variable, however the setter must be called like a function, and you’ll pass the new value into that function. Ex:
const [getter, setter] = useState(“Hello World”)
console.log(getter)
setter(“Excelsior”)
console.log(getter)
#expected output:
Hello World
Excelsior
Lastly we create a function that will run when the button is clicked, and get the value of the input, then count the string according to the parameters you selected.
These counting functions are written the same way they are in JavaScript, so once you understand how React sets its states you can begin adding this functionality to your own web application.
JavaScript comes with excellent tools to do common things easily, but it isn’t always obvious how to do less frequently needed stuff.
I hope this made sense and that I was able to give you some new tools you can use in your own quests to solve the problems specific to you.
And If you seek more information on how strings can be manipulated and searched in various ways, you can spend quite a long time learning about ‘regular expressions’. They can be hard to understand, but extremely powerful when faced with string related problems.
