Scribd
Upload
2 views13 pages

Question 2

The document outlines the creation of a React application that displays the real-time word count of user input in an input field. It includes requirements for the UI, state management, and processing of the input text to count words accurately. Key learning points include handling state, processing user input, and rendering derived data in real-time.

Uploaded by

e25b070697
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views13 pages

Question 2

The document outlines the creation of a React application that displays the real-time word count of user input in an input field. It includes requirements for the UI, state management, and processing of the input text to count words accurately. Key learning points include handling state, processing user input, and rendering derived data in real-time.

Uploaded by

e25b070697
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Exercise 2 : Word Count

Objective:
Display the number of words typed in the input field.
Problem Statement:
Create a React application with an input field.
As the user types text into the input field, the application should display the total number of
words entered.
The word count should update in real time.
Requirements:
1. An input field to take user input
2. A section (text or paragraph) to display the word count
3. Real-time update (no button required)
Expected Behavior:
When the user types text, the word count should update instantly
Words are separated by spaces
Extra spaces should not be counted as words
If the input is empty, the word count should be 0
Step-by-Step Guide to Solve
Step 1: Create Basic UI
Add an <input> field
Add a <p> or <h2> to display the word count
Step 2: Create State
Use useState to store the input text
Initialize it with an empty string
Step 3: Connect Input with State
Bind the input field using value
Update state using onChange
Step 4: Process the Input Text
Take the text from state
Remove extra spaces using trim()
Split the text into words using " "
Remove empty values using filter()
Step 5: Count Words
Calculate the length of the filtered array
Step 6: Display the Count
Show the word count in the UI
Data Flow:
User types → state updates → process text → count words → UI updates
Key Learning:
Reusing state for multiple purposes
Processing user input
Working with string methods ( trim , split )
Using array methods ( filter , length )
Real-time derived data rendering

You might also like