import React, { useState } from 'react'

export default function Form() {
    const clear = () => {
        let newtext = text.substr(0, -1);
        setText(newtext);
    }
    const copy = () => {
        navigator.clipboard.writeText(text)
    }
    const upper = () => {
        let newtext = text.toUpperCase();
        setText(newtext);
    }
    const capitalize = () => {
        let newtext = text.charAt(0).toUpperCase() + text.slice(1);
        setText(newtext);
    }
    const remove_space = (event) => {
        let newtext = text.split(' ').filter(s => s).join(' ');
        setText(newtext);
    }
    const handleOnChange = (event) => {
        setText(event.target.value);
    }
    const [text, setText] = useState("");
    return (
        <>
            <div classname="form-group container p-4">

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

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

        
        
        
How to Learn React Step by Step:
React JS is a very popular web framework. It is a free and open-source front-end JavaScript library for building user interfaces or UI components. React JS is maintained by Facebook. So, if you are a web developer, you should be aware that everythin gwe see on the web is just html, css and the functioning things are simply javascript. You must have worked with html and css to make simple websites or standalone pages. But, what if you are building a large commercial website with many pages. There are a lot things to know about web development and many compplexitie4s in doing them like routing without reloading the pages.

So, React makes things much more easier and developer friendly to handle. Thus for a modern UI developer, you should learn this. Not only for UI, React helps in making a complete web app structure. This is not just for React. There are other JS libraries also like Angular, that you can learn to create modern web apps. But, in this post, we are discussing about React JS... Further Reading