React Js Check First Letter of String is Uppercase

React Js Check First Letter of String is Uppercase:In React.js, you can check if the first letter of a string is uppercase using various methods. One way is to use the toUpperCase() method to convert the first letter to uppercase and then compare it with the original string. Another approach is to use the charCodeAt(0) method to get the Unicode value of the first character and check if it falls within the uppercase letter range. Alternatively, you can utilize a regular expression with the test() method to verify if the first letter is uppercase. These methods help determine the capitalization of the initial character in a given string within a React application.

written

reviewed

updated

How can you check if the first letter of a string in a React js application is uppercase or not?

This React code checks if the first letter of a string is uppercase using the toUpperCase() method.It displays a message indicating whether the first letter is uppercase or not when a button is clicked.

React Js Check First Letter of String is Uppercase | toUpperCase() Example

<script type="text/babel">
    const { useState } = React;
    function App() {
      const [input, setInput] = useState('Font aweosme icons');
      const isFirstLetterUppercase = input.length > 0 && input[0] === input[0].toUpperCase();

      const showAlert = () => {
        const message = isFirstLetterUppercase
          ? 'The first letter is uppercase.'
          : 'The first letter is not uppercase.';
        alert(message);
      };
      return (
        <div className='container'>
          <h3>React Js Check First Letter Of String Is Uppercase </h3>
          <input
            className='input-field'
            type="text"
            value={input}
            onChange={(e) => setInput(e.target.value)}
            placeholder="Enter a string"
          />
          <button className='check-button' onClick={showAlert}>Check Uppercase</button>
        </div>

      );
    }
    ReactDOM.render(<App />, document.getElementById("app"));
  </script>

Run

Output of React Js Check First Letter of String is Uppercase

Pasted Image

This React code uses the charCodeAt() method to determine if the first letter of a string is uppercase. It also provides the option to capitalize the first letter if it is not already uppercase

using charCodeAt() Method

<script type="text/babel">
    const { useState } = React;
    function App() {
      const str = "hello, world!"; // Replace with your string

      const isFirstLetterUppercase = str => {
        if (str.length === 0) {
          return false;
        }
        const firstCharCode = str.charCodeAt(0);
        return firstCharCode >= 65 && firstCharCode <= 90;
      };

      const capitalizeFirstLetter = str => {
        if (isFirstLetterUppercase(str)) {
          return str;
        } else {
          const firstCharCode = str.charCodeAt(0);
          const capitalizedFirstLetter = String.fromCharCode(firstCharCode - 32);
          return capitalizedFirstLetter + str.slice(1);
        }
      };

      const modifiedString = capitalizeFirstLetter(str);
      return (
        <div className='container'>
          <h3 className='title'> use charCodeAt() Method</h3>
          <p className='string-info'>String: {str}</p>
          <p className='uppercase-check'>Is the first letter uppercase? {isFirstLetterUppercase(str).toString()}</p>
          <p className='modified-string'>Modified String: {modifiedString}</p>
        </div>

      );
    }
    ReactDOM.render(<App />, document.getElementById("app"));
</script>

Run

Output of above Example

Pasted Image

This React code employs a regular expression and the test() method to check if the first letter of an input string is uppercase. It updates the UI in real-time to indicate whether the first letter is uppercase or not as the user types

test() method

   <script type="text/babel">
    const { useState } = React;
    function App() {
      const [inputText, setInputText] = useState('');
      const isUppercase = /^[A-Z]/.test(inputText);

      return (
        <div className='container'>
          <input
            type="text"
            placeholder="Enter a string"
            onChange={(e) => setInputText(e.target.value)}
            className="input-element"
          />
          <p className="paragraph-element">Is the first letter uppercase? {isUppercase ? 'Yes' : 'No'}</p>
        </div>

      );
    }
    ReactDOM.render(<App />, document.getElementById("app"));
  </script>

Run

Output of React Js Check First Letter Of String Is Uppercase

Pasted Image

Summary

This post demonstrates how to check if the first letter of a string is uppercase in a React.js application using various methods. It includes code examples with explanations for using toUpperCase(), charCodeAt(), and regular expressions with the test() method, providing practical solutions for determining capitalization in strings within a React context.

React JS Tutorial

React Js Check First Letter of String is Uppercase

Feedback for Abhishek

How can you check if the first letter of a string in a React js application is uppercase or not?

React Js Check First Letter of String is Uppercase | toUpperCase() Example

Output of React Js Check First Letter of String is Uppercase

using charCodeAt() Method

Output of above Example

test() method

Output of React Js Check First Letter Of String Is Uppercase

Summary