How to convert LowerCase values to UpperCase in Input Field using ReactJS ?
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.
- 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 .
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 :
Step 3: Install the following dependencies.
npm install react npm install useState
Step 4: Importing <CapitalLetter /> component in root component.
File Name: App.js
Step 5: Using event listener, we will change lower case values to uppercase.
File Name: CapitalLetter.jsx
Step to run the application: Run the following command in terminal.
Output: Type localhost:3000 in browser