Adding More logic
React’s useState hook is used to manage
and manipulate text dynamically within a functional component. The component demonstrates how state
updates trigger automatic UI re-rendering through features like text transformation, word counting, and
live previews.
Features of the Updated React State Code
Supports multiple text transformations such as uppercase, lowercase, and removal of extra spaces.
Provides clipboard functionality allowing users to copy text directly using the browser Clipboard API.
Includes real-time word and character counting, updating instantly as the text changes.
Offers a clear text option to reset the state and UI with a single click.
Displays live preview output, improving user experience through immediate feedback.
Handles edge cases gracefully, such as empty input or excessive whitespace.
Demonstrates automatic re-rendering, clearly showing how state updates affect the UI.
Full Code:-
import React, { useState } from 'react';
export default function TestForm(props) {
const [text, newText] = useState("");
const handleUpCase = () => {
newText(text.toUpperCase());
};
const handleLowCase = () => {
newText(text.toLowerCase());
};
const handleClear = () => {
newText("");
};
const handleCopy = () => {
navigator.clipboard.writeText(text);
};
const handleExtraSpaces = () => {
newText(text.split(/\s+/).join(" "));
};
const handleChange = (event) => {
newText(event.target.value);
};
const wordCount =
text.trim() === "" ? 0 : text.trim().split(/\s+/).length;
return (
<>
<div className="container">
<h1 className="my-3 py-2">{props.heading}</h1>
<textarea
className="form-control mb-3"
value={text}
onChange={handleChange}
rows="8"
></textarea>
<button className="btn btn-primary mx-1" onClick={handleUpCase}>
Uppercase
</button>
<button className="btn btn-success mx-1" onClick={handleLowCase}>
Lowercase
</button>
<button className="btn btn-warning mx-1" onClick={handleExtraSpaces}>
Remove Spaces
</button>
<button className="btn btn-info mx-1" onClick={handleCopy}>
Copy Text
</button>
<button className="btn btn-danger mx-1" onClick={handleClear}>
Clear
</button>
<div className="my-3">
<p>
<strong>Words:</strong> {wordCount} |
<strong> Characters:</strong> {text.length}
</p>
</div>
<div className="my-3">
<h3>Preview</h3>
<p>{text.length > 0 ? text : "Nothing to preview..."}</p>
</div>
</div>
</>
);
}