How to force an Input field to Uppercase in React

This article will show you how to force an input field to uppercase in React using the toUpperCase() or text-transform: uppercase method, along with detailed explanations and examples.

Force an Input field to Uppercase in React

Using toUpperCase() method

The toUpperCase() method converts all characters in a string to uppercase. This way, we will use this method on the value of the input and set its value back. The two ways binding feature they provide keeps the model and view in sync. However, React does not support this, so we will code it using the useState hook.

Code:

import React, { useState } from "react";

const App = () => {
    const [message, setMessage] = useState("");

    const handleOnChange = e => {
        setMessage(e.target.value.toUpperCase());
    };

    return (
        <div>
            <h2>Enter Message :</h2>
            <input
                value={message}
                onChange={handleOnChange}
            />
        </div>
    );
};

export default App;

Output:

By adding two ways of binding, we can easily control the value of the input tag that needs Uppercase. When the handleOnChange function is run, the internal value of the input tag will be forced to convert to uppercase with the toUppercase() function of javascript. 

You can see that when we enter a text in lowercase, the value displayed in the input tag has been converted to uppercase, or you can also refer to how to add it below.

Using text-transform: uppercase method

The text-transform property is used to adjust the text to uppercase or lowercase, and it can take the value:

• capitalize: the first letter of each word in the Text section will be capitalized.
• uppercase: all characters in the text will be capitalized.
• lowercase: all characters in the text will be lowercase.
• none: does not change the way the element content is displayed.

 If we set the value of the element’s text-transform to uppercase, the text inside the tag will automatically change to uppercase. Let’s see how we use this attribute in the following code.

Code:

import React, { useState } from "react";

const App = () => {
    const [message, setMessage] = useState("");

    const handleOnChange = (e) => {
        setMessage(e.target.value);
    };

    return (
        <div>
            <h2>Enter Message :</h2>
            <input
                style={{ textTransform: "uppercase" }}
                value={message}
                onChange={handleOnChange}
            />
        </div>
    );
};

export default App;

Although the displayed result is the same as the first way, if you look at the value of the input, you will see that its value is not converted to uppercase, but only the text displayed on the screen is converted. This is often used with tags that don’t need to take a value because it will only mislead the programmer as to whether the text value is uppercase or lowercase. Wish you success with the methods mentioned in the article.

Summary

To summarize, you were shown how to force an input field to uppercase in React. However, it would help if you used toUppercase to convert the input

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs