React Js Count the occurrences of each word in a string

React Js Count the occurrences of each word in a string:In React.js, you can count the occurrences of each word in a string by first splitting the string into words using JavaScript's split method. Then, you can create an object to store word frequencies, iterating through the array of words and incrementing the count for each word encountered. Finally, you can display or use this frequency data as needed within your React application, offering valuable insights into word usage patterns in the provided string.

written

reviewed

updated

How can you use React js to count the occurrences of each word in a given string?

This React.js code snippet creates a word count application. It initializes a textarea with a default text, and when the "Count Words" button is clicked, it counts the occurrences of each word in the input text. It does this by splitting the text into words, converting them to lowercase, and then tallying their occurrences using a JavaScript object. The word counts are displayed below the button. This simple React application enables users to analyze and visualize word frequency in a given input string.

React Js Count the occurrences of each word in a string Example

  <script type="text/babel">

    const { useState } = React;
    function App() {
      const [inputText, setInputText] = useState('The brown dog jumped over the lazy dog when the brown fox was sleeping');
      const [wordCounts, setWordCounts] = useState({});

      const countWords = () => {
        const words = inputText.toLowerCase().split(/\s+/);
        const counts = {};

        for (const word of words) {
          counts[word] = (counts[word] || 0) + 1;
        }

        setWordCounts(counts);
      };

      return (
        <div className='container'>
          <h2 className='title'>React Js Count the occurrences of each word in a string</h2>
          <textarea
            className='input-text'
            placeholder="Enter text..."
            value={inputText}
            onChange={(e) => setInputText(e.target.value)}
          />
          <button className='count-button' onClick={countWords}>Count Words</button>
          <div className='word-counts'>
            <h3 className='word-counts-title'>Word Counts:</h3>
            <ul className='word-list'>
              {Object.entries(wordCounts).map(([word, count]) => (
                <li key={word} className='word-item'>
                  {word}: {count}
                </li>
              ))}
            </ul>
          </div>
        </div>

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

Run

Output of React Js Count the occurrences of each word in a string

Pasted Image

How can I count the occurrences of a specific word or substring in a string using Reactjs?

React Js Counting Occurrences of a specific word/substring in String

  <script type="text/babel">

    const { useState } = React;
    function App() {
      const [text, setText] = useState('Welcome to Font Awesome Icons ');
      const [wordToCount, setWordToCount] = useState('Font');
      const [count, setCount] = useState(0);

      const handleTextChange = (e) => {
        setText(e.target.value);
        // Update the count whenever the text or wordToCount changes
        countOccurrences(e.target.value, wordToCount);
      };

      const handleWordToCountChange = (e) => {
        setWordToCount(e.target.value);
        // Update the count whenever the text or wordToCount changes
        countOccurrences(text, e.target.value);
      };

      const countOccurrences = (text, word) => {
        if (text && word) {
          const wordsArray = text.split(' ');
          const filteredArray = wordsArray.filter((w) => w === word);
          setCount(filteredArray.length);
        } else {
          setCount(0);
        }
      };

      return (
        <div className='container'>
          <h2 className='title'>React Js Counting Occurrences of a specific word/substring in String</h2>
          <textarea
            className='input-textarea'
            placeholder="Enter text here..."
            value={text}
            onChange={handleTextChange}
          />
          <input
            className='input-text'
            type="text"
            placeholder="Word to count"
            value={wordToCount}
            onChange={handleWordToCountChange}
          />
          <p className='result'>Occurrences of "{wordToCount}": {count}</p>
        </div>

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

Run

Output of React Js Counting Occurrences of a specific word/substring in String