React Js Count Number of Vowels in a string

<!DOCTYPE html>
<html>

<body>
  <div id="app"></div>
  <script type="text/babel">
    const { useState, useEffect } = React;

function App() {
      const [inputText, setInputText] = useState('');
      const [vowelCount, setVowelCount] = useState(0);

const countVowels = (text) => {
        // Convert the input text to lowercase to make it case-insensitive
        const lowerCaseText = text.toLowerCase();

// Define a regular expression to match vowels (a, e, i, o, u)
        const vowelPattern = /[aeiou]/g;

// Use match() to find all occurrences of vowels in the text
        const vowelMatches = lowerCaseText.match(vowelPattern);

// If vowelMatches is null, there are no vowels; otherwise, get the count
        const count = vowelMatches ? vowelMatches.length : 0;

return count;
      };

const handleInputChange = (event) => {
        const text = event.target.value;
        setInputText(text);
        const count = countVowels(text);
        setVowelCount(count);
      };

return (
        <div className='container'>
          <h3>React Js Count Number of Vowels in String</h3>
          <input
            type="text"
            placeholder="Enter a string"
            value={inputText}
            onChange={handleInputChange}
          />
          <p>Number of vowels: {vowelCount}</p>
        </div>

);
    }

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

.container {
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      text-align: center;
      max-width: 600px;
      margin: 0 auto;
    }

h3 {
      font-size: 24px;
      color: #333;
    }

input {
      width: 100%;
      padding: 10px;
      margin: 10px 0;
      border: 1px solid #ccc;
      border-radius: 4px;
      outline: none;
      font-size: 16px;
    }

p {
      font-size: 20px;
      color: #007bff;
    }
  </style>
</body>

</html>