How to convert LowerCase values to UpperCase in Input Field using ReactJS ?

In React, to convert the Lower case input values to uppercase we can use the Javascript methods like toUpperCase and toLocaleUppercase methods along with the event listeners.

Prerequisites:

• React JS
• NPM & Node.js
• JavaScript toUpperCase method

Approach:

To convert LowerCase values to UpperCase in the Input Field using React JS we will be using the JavaScript toUpperCase method. We will use the eventListener onMouseEnter to call the toUpperCase method when the mouse enters the input field.

Steps to Create React Application :

Step 1: Initialize a react project using the following command.

npx create-react-app my-first-app

Step 2: Move to the project directory by executing the command :

cd my-first-app

Project Structure:

Example: This example uses toUppercase method to convert lowercase input to uppercase string when the curser entters the input box.

Javascript

// Filename - App.js

import React from "react";
import CapitalLetter from "./CapitalLetter";
function App() {
    return (
        <div
            style={{ textAlign: "center", margin: "auto" }}
        >
            <h1 style={{ color: "green" }}>
                GeeksforGeeks
            </h1>
            <h3>
                React JS example for Lower Case to Upper
                Case Letters
            </h3>
            <CapitalLetter />
        </div>
    );
}

export default App;

Javascript

// Filename - CapitalLetter.js

import React, { useState } from "react";
function CapitalLetter() {
    const [username, setUsername] = useState("");
    const handleInput = (event) => {
        event.preventDefault();
        setUsername(event.target.value);
    };
    const changeCase = (event) => {
        event.preventDefault();
        setUsername(event.target.value.toUpperCase());
    };
    return (
        <div>
            <div class="container">
                <h2>Sign In Form</h2>
                <form
                    method="post"
                    class="-group form-group"
                >
                    <label for="username">Username:</label>
                    <input
                        type="text"
                        name="username"
                        id="username"
                        value={username}
                        onChange={handleInput}
                        onMouseEnter={changeCase}
                    ></input>
                    <br />
                    <br />

                    <label for="password">Password:</label>
                    <input
                        type="password"
                        name="password"
                        id="password"
                    />
                    <i
                        class="bi bi-eye-slash"
                        id="togglePassword"
                    ></i>
                    <br />
                    <br />
                    <button
                        type="button"
                        id="submit"
                        class="btn btn-primary"
                    >
                        Log In
                    </button>
                </form>
            </div>
        </div>
    );
}

export default CapitalLetter;

Step to run the application: Run the following command in terminal.

npm start

Output: This output will be visible on http://localhost:3000 in browser