Adding More Logic In State In React Js

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>
    </>
  );
}

Features of the Updated React State Code

Full Code:-

How did you feel about this post?