How do I build a controlled form in React that restricts input to uppercase letters only

Question

With the help of code can you tell me How do I build a controlled form in React that restricts input to uppercase letters only?

Answer 1

You can implement an onChange event handler that converts the input value to uppercase before updating the component's state. Here's how you can achieve this:

import React, { useState } from 'react';

function UppercaseInput() {

  const [value, setValue] = useState('');

  const handleChange = (event) => {

    const uppercaseValue = event.target.value.toUpperCase();

    setValue(uppercaseValue);

  };

  return (

    <input

      type="text"

      value={value}

      onChange={handleChange}

      placeholder="Enter uppercase text"

    />

  );

}

export default UppercaseInput;