React Js Count Number of Vowels in a string

React Js Count Number of Vowels in a string:To count the number of vowels in a string using ReactJS, you can create a component that takes an input string, utilizes JavaScript's string manipulation methods, and then renders the vowel count. Use a state variable to keep track of the count as you iterate through the characters in the string. Filter and count the vowels (a, e, i, o, u) using a regular expression or simple conditional statements

written

reviewed

updated

React Js Count Number of Vowels in a string

  <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>

Run

Output of React Js Count Number of Vowels in a string

Pasted Image

Setting Up the React Component:

We start by defining a functional React component called App. We import the necessary hooks, useState and useEffect. The component's state consists of two variables:

inputText: This holds the user's input string.
vowelCount: This holds the count of vowels in the input string

const { useState, useEffect } = React;

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

Counting Vowels:

We define a function countVowels that takes the input text as an argument. Inside this function, we perform the following steps:

Convert the input text to lowercase to make the search for vowels case-insensitive.
Define a regular expression, vowelPattern, to match vowels (a, e, i, o, u).
Use the match method to find all occurrences of vowels in the lowercase text.
Check if vowelMatches is null (indicating no vowels found), and if not, retrieve the length of the matched array as the count.

const countVowels = (text) => {
  const lowerCaseText = text.toLowerCase();
  const vowelPattern = /[aeiou]/g;
  const vowelMatches = lowerCaseText.match(vowelPattern);
  const count = vowelMatches ? vowelMatches.length : 0;
  return count;
};

Handling Input Changes:

We define a function handleInputChange to handle changes in the input field. This function updates the inputText state variable and then calls the countVowels function to calculate the vowel count based on the new input text. Finally, it updates the vowelCount state variable with the calculated count

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

Rendering the Component:

In the component's render method, we create a simple user interface with an input field where you can type your string. As you type, the number of vowels in the string is updated and displayed below the input field

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>
);

React JS Tutorial

React Js Count Number of Vowels in a string

Feedback for Abhishek

React Js Count Number of Vowels in a string

Output of React Js Count Number of Vowels in a string