React Word Counter – JavaScript Exercise #16

Overview

In this exercise, you will create a React Word Counter component that allows the user to input a text and displays the number of words in the text.

Instructions for React Word Counter

1. Create a new component called WordCounter in a new file.
2. The component should have a textarea where the user can input a text.
3. Display the number of words in the text below the textarea.
4. The number of words should update in real time as the user types.
5. Use state to keep track of the number of words.
6. Use the built-in JavaScript string method “split” to split the text into an array of words, then count the number of elements in the array.

Bonus Requirements

• Add a button that clears the textarea and resets the word count.
• Add a feature that allows the user to input a maximum number of words and displays a warning message if they exceed the limit.
• Use a different method to count the number of words (e.g., regular expressions).

Before you dive into the final output, I want to encourage you to take some time to work through the exercise yourself. I believe that active learning is the most effective way to learn and grow as a developer.

So, grab a pen and paper, fire up your code editor, and get ready to dive into the React Word Counter exercise. Once you have completed the exercise, feel free to return to this blog post to compare your solution to mine.

Output for the Word Counter exercise

import React, { useState } from 'react';

const WordCounter = () => {
  const [text, setText] = useState('');
  const [wordCount, setWordCount] = useState(0);
  const [maxWords, setMaxWords] = useState('');

  const handleInputChange = (e) => {
    const newText = e.target.value;
    const newWordCount = newText.trim().split(/\s+/).filter(Boolean).length;
    setWordCount(newWordCount);
    setText(newText);
  };

  const handleClearClick = () => {
    setText('');
    setWordCount(0);
  };

  const handleMaxWordsChange = (e) => {
    const newMaxWords = e.target.value;
    setMaxWords(newMaxWords);
    if (newMaxWords && wordCount > parseInt(newMaxWords)) {
      setWordCount(parseInt(newMaxWords));
    }
  };

  return (
    <div>
      <textarea value={text} onChange={handleInputChange} />
      <div>
        Word count: {wordCount}
        {maxWords && ` / ${maxWords} max`}
      </div>
      <div>
        <label>
          Max words:
          <input type="number" value={maxWords} onChange={handleMaxWordsChange} />
        </label>
      </div>
      <button onClick={handleClearClick}>Clear</button>
    </div>
  );
};

export default WordCounter;

import React from 'react';
import WordCounter from './WordCounter';

const App = () => {
  return (
    <div>
      <h1>React Word Counter</h1>
      <WordCounter />
    </div>
  );
};

export default App;

Few examples of applications where the WordCounter component could be useful:

1. Blog post editor: Using the WordCounter in the blog editor helps authors monitor word count and adhere to length constraints.
2. Social media post editor: The WordCounter can be used in social media post editors like in blog editors. For example, Twitter has a maximum tweet length of 280 characters, which can roughly translate to about 50 words. Including the WordCounter component in the tweet editor can help users ensure their tweets stay within the character limit.
3. Language learning app: Including a WordCounter in a language learning app provides immediate feedback on writing length and helps learners track their progress.
4. Job application form: The WordCounter component helps job candidates adhere to word count limits in their written responses.

These are just a few examples, but there are many more use cases where the WordCounter component can come in handy!

Conclusion

We developed a React WordCounter component that tracks and limits word input, ideal for blogs, social media, language learning apps, and job application forms.

React allows for the creation of reusable components, exemplified by the WordCounter tool. This exercise aims to demonstrate how React can help developers of all levels build user interfaces and address real-world challenges.

Thanks for taking this JavaScript exercise!

I hope you found this exercise helpful and enjoyable. Additionally, it has deepened your understanding of React development. Furthermore, keep practising and experimenting with React, and you’ll be well on your way to becoming a skilled React developer!

Boost your React skills with 25 React JavaScript Practice Exercises with Solutions hands-on challenges to master components, hooks, and more!