ReactJS is a popular JavaScript library for building user interfaces, and it provides developers with powerful tools to create interactive web applications. One common requirement is to convert lowercase values entered in an input field to uppercase. In this article, we will explore how to achieve this functionality using ReactJS.
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
