React Js Count the occurrences of each word in a string

​

    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>

​

    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>