Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Last Updated : 19 Sep, 2021

Sometimes we see that even we type in lowercase in form fields but they automatically become uppercase. Today we will achieve that functionality in this article.

Given an input textarea and the task is to transform the lowercase characters into uppercase characters while taking input from user. It can be done using React.

Approach:

  • Using event listener, we will change lower case values to uppercase.
  • When user begins to type, an onChange event is created, we are updating the state of value with the upperCase value of the entered value using toUpperCase() function.
  • This updated value is made to reflect in the form after user completes it entry .

Function used:

toUpperCase()

It converts LowerCase string values to UpperCase.



Creating React app:

Step 1: execute Create react app using the following command.

npx create-react-app my-first-app

Step 2: Change directory to that folder by executing the command :

cd my-first-app

Step 3: Install the following dependencies.

npm install react
npm install useState

Project Structure:

Step 4: Importing <CapitalLetter /> component in root component.

File Name: App.js

Javascript




function App() {
  return (
      
    <div className="App">
        
  <CapitalLetter/>
    </div>
  );
}
  
export default App;

Step 5: Using event listener, we will change lower case values to uppercase.

File Name: CapitalLetter.jsx

Javascript




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">
      <h1>Sign In</h1>
      <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>
          <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="submit" 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: Type localhost:3000 in browser




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!