TextForm.js

import React,{useState} from 'react'

export default function TextForm(props) {
    const handleUpClick=()=>{
        //console.log("Uppercase was clicked" + text);
        let newText = text.toUpperCase();
        setText(newText)
        props.showAlert("Converted to upper case!","success")
    }

    const handleLowClick=()=>{
        let newText = text.toLowerCase();
        setText(newText)
        props.showAlert("Converted to lower case!","success")
    }
    const handleClClick=()=>{
      let newText = '';
      setText(newText)
      props.showAlert("Text cleared!","success")
    }

    const handleTrimClick=()=>{
      let newText = text.trim();
      setText(newText)
      props.showAlert(" Extra Space removed!","success")
    }
    const handleCopy=()=>{
      navigator.clipboard.writeText(text);
      props.showAlert("Copied to clipboard!","success")
    }
    const handleOnChange=(event)=>{
        //console.log("On Change");
        setText(event.target.value);
    }

    const[text,setText]=useState('');
    // setText("new text") ---to change text
  return (
    <>
    <div className="container" style={{color: props.mode==='dark'?'white':'black'}}>
        <h1>{props.heading}</h1>
<div className="mb-3">
  <textarea className="form-control" value={text} id="myBox" onChange={handleOnChange} style={{backgroundColor: props.mode==='dark'?'#191b24':'white',color: props.mode==='dark'?'white':'black'}} rows="7"></textarea>
</div>
    <button disabled={text.length===0} className="btn btn-primary mx-2 my-1" onClick={handleUpClick}>Convert to Uppercase</button>
    <button  disabled={text.length===0} className="btn btn-primary mx-2 my-1" onClick={handleLowClick}>Convert to Lowercase</button>
    <button  disabled={text.length===0} className="btn btn-primary mx-2 my-1" onClick={handleTrimClick}>Trim Space</button>
    <button  disabled={text.length===0} className="btn btn-primary mx-2 my-1" onClick={handleClClick}>Clear Text</button>
    <button  disabled={text.length===0} className="btn btn-primary mx-2 my-1" onClick={handleCopy}>Copy Text</button>
    </div>
    <div className="container my-4" style={{color: props.mode==='dark'?'white':'black'}}>
        <h4> Text Summary</h4>
        <p>{text.split(/\s+/).filter((element)=>{return element.length!==0}).length} words and {text.length} characters</p>
        <p>{0.008 * text.split(" ").length} Minutes to read </p>
        <h4>Preview</h4>
        <p>{text.length>0?text:"Nothing to preview"}</p>
    </div>
    </>
  )
}