How To Convert LowerCase Values To UpperCase In Input Field Using ReactJS?

Last Updated : 14 Oct, 2024

To convert the input string from lowercase to uppercase inside an input field using React, we can use the toUpperCase() method. This method easily converts any input string to uppercase. In this article we’ll be using the onMouseEnter event listener to trigger the toUpperCase() method when the mouse enters the input field, ensuring that the text inside the field is transformed to uppercase automatically.

Prerequisites

Approach

To convert the input string from lowercase values to uppercase inside the input field using react we will be using the toUpperCase method. This method is used to convert any input string to uppercase. We will use the eventListener onMouseEnter to call the toUpperCase method when the mouse enters the input field.

Steps To Convert LowerCase Values To UpperCase

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;