function InputBox() {
const [txt, setTxt] = useState(" ");
const changed = (e) => {
convertedTxt = txt;
setTxt(e.target.value);
};
const covtToUpper = () => {
console.log("yoyoyooy");
convertedTxt = txt.toUpperCase();
setTxt(convertedTxt);
};
const covtToLower = () => {
convertedTxt = txt.toLowerCase();
// txtArea.value = convertedTxt;
setTxt(convertedTxt);
};
return (
<>
<div className="box-c">
<div className="box">
<h1>Enter You Text Here !</h1>
<textarea
name="input"
value={txt}
onChange={changed}
id="Input"
rows="10"
></textarea>
<div className="btns">
<button
type="button"
onClick={covtToUpper}
className="btn btn-primary"
>
Convert to Uppercase
</button>
<button
type="button"
onClick={covtToLower}
className="btn btn-success"
>
Convert to Lowercase
</button>
</div>
</div>
<div className="box-2">
<h2>Your text summary</h2>
<div className="data">
<b>{txt.length} character </b>
<b> {txt.split(" ").length} words</b>
</div>
<b> {0.008 * txt.split(" ").length} minutes to read</b>
</div>
<div className="box-3">
<h2>Preview</h2>
<p>{txt}</p>
</div>
</div>
</>
);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>
I am not able to use and string methods in my react app. Blank screen or white screen problem
Basically I'm building react app after long time i used to create it with class base component but after 2 years i show some yt videos and learn about function base components and than i build a app but when i run this app my screen got white or blank i read many editorial's but not get proper answer .
