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

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
Blogathon-2021
React-Questions
Blogathon
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to Import JSON Data into SQL Server?
How to Install Tkinter in Windows?
How to Create a Table With Multiple Foreign Keys in SQL?
How to pass data into table from a form using React Components
SQL - Multiple Column Ordering
How to fetch data from an API in ReactJS ?
How to redirect to another page in ReactJS ?
How to pass data from child component to its parent in ReactJS ?
Create a Responsive Navbar using ReactJS
How to pass data from one component to other component in ReactJS ?