How to count number of words in javascript - Using UseState React Tutorial

   Idea

This article will teach you how you can count the number of words in JavaScript. You will learn about making a logic in JavaScript. We will make this project in react.

 Prerequisites

Basic knowledge of JavaScript (string operations), react JS basics.

  Code

Logic of the program

HTML part in React:

    <div className="form-group container p-4">

                /* buttons */
           <button disabled={text.length === 0} onClick={clear} className="btn  btn-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top"><i className="far fa-trash-alt"></i></button>
           <button disabled={text.length === 0} onClick={copy} className="btn  btn-primary"><i className="far fa-copy"></i></button>
           <button disabled={text.length === 0} onClick={upper} className="btn  btn-primary"><i className="far fa-text-size"></i></button>
           <button disabled={text.length === 0} onClick={capitalize} className="btn  btn-primary"><i className="fas fa-font-case"></i></button>
           <button disabled={text.length === 0} onClick={remove_space} className="btn btn-primary"><i className="fas fa-line-height fa-rotate-270"></i></button>

                /* Textarea */
           <textarea className="thetext form-control mb-4" value={text} onChange={handleOnChange} id="exampleFormControlTextarea1" rows="8"></textarea>
           <h4 className="mt-4">Text Count</h4>
           <div className="my-2">
           <p>{text.split(/\s+/).filter((element) => { return element.length !== 0 }).length} words and {text.split(' ').filter(s => s).join('').length} characters</p>
         
     </div >

Making a react component with this Logic

Using React UseState:

import React, { useState } from 'react'

export default function Form() {
    const clear = () => {
        let newtext = text.substr(0, -1);
        setText(newtext);
    }
    const handleOnChange = (event) => {
        setText(event.target.value);
    }
    const [text, setText] = useState("");
    return (
        <>
            <div className="form-group container p-4">

                {/* Textarea */}
                <textarea className="thetext form-control mb-4" value={text} onChange={handleOnChange} id="exampleFormControlTextarea1" rows="8"></textarea>
                <h4 className="mt-4">Text Count</h4>
                <div className="my-2">
                    <p>{text.split(/\s+/).filter((element) => { return element.length !== 0 }).length} words and {text.split(' ').filter(s => s).join('').length} characters</p>
                </div>
            </div >
        </>
    )
}

 Output

Now your Program is ready...



I just a used a little bootstrap and added some more buttons and extra logic to make this. I have already written a post on this whole site. Visit

 Summary

In this article you learnt about how you can count the no. of words and characters in React.

Thanks for reading. Hope you liked the idea and project. Do comment down you opinions. Also, share this project with your friends and programmers.

0 Comments