Introduction

In this article, we will learn how to modify Uppercase to Lowercase, Lowercase to Uppercase & Reverse your whole sentence in React JS.

An Effortless Way To Modify Uppercase to Lowercase And Title Capitalization

Have you ever tried to type out a document, made a few capitalization mistakes, and wished you won’t have to waste much time on editing?

It happens a lot, and if you use a typical word processing tool, you will have your mistakes autocorrected as you type, but those kinds of software only correct grammatical errors.

If you have to convert your whole portion to capitalization, you will need to do it manually. And that takes time.

However, with this Article, you can make your own text transformer, and you can quickly transform the case of your texts. All you have to do is just copy and paste your text, then select the case you want to transform it to.

import React, { useState } from 'react'

export default function TextForm(props) {
    const handleUpClick = () => {
        let newText = text.toUpperCase()
        setText(newText)
    }

    const handleOnChange = (event) => {
        setText(event.target.value)
    }

    const handleLowClick = () => {
        let newText2 = text.toLowerCase()
        setText(newText2)
    }

    const handleRevClick = () => {
        let newText3 = text.split('').reverse().join('')
        setText(newText3)
    }

    const [text, setText] = useState('Enter Text Here');
    return (
        <>
            <div>
                <h1>{props.heading}</h1>
                <div className="form-group">
                    <textarea className="form-control" value={text} onChange={handleOnChange} id="myBox" rows="8"></textarea>
                </div>
                <button className='btn btn-primary mx-1' onClick={handleUpClick}>Convert to Uppercase</button>
                <button className='btn btn-primary mx-1' onClick={handleLowClick}>Convert to Lowercase</button>
                <button className='btn btn-primary mx-1' onClick={handleRevClick}>Reverce Text</button>
            </div>
            <div className='container my-3'>
                <h1>Your Text Summery</h1>
                <p>{text.split(' ').length} words and {text.length} characters</p>
            </div>
        </>
    )
}

Now, Run the Project

Output

If you have any questions or face any problems regarding this article, please let me know in the comments.

For new blogs check. here.

Thank You.