Video 7 Completed

Author: harrycodewithharry

src/App.js

@@ -1,12 +1,16 @@
 import './App.css';
 import Navbar from './components/Navbar';
+import TextForm from './components/TextForm';
 
 function App() {
   return (
     <>
     {/* <Navbar title="TextUtils" aboutText="About TextUtils" /> */}
     {/* <Navbar/> */}
     <Navbar title="TextUtils" />
+    <div className="container my-3">
+    <TextForm heading="Enter the text to analyze below"/>
+    </div>
     </> 
   );
 }

src/components/TextForm.js

@@ -0,0 +1,28 @@
+import React, {useState} from 'react'
+
+
+export default function TextForm(props) {
+    const handleUpClick = ()=>{
+        // console.log("Uppercase was clicked: " +  text);
+        let newText = text.toUpperCase();
+        setText(newText)
+    }
+
+    const handleOnChange = (event)=>{
+        // console.log("On change");
+        setText(event.target.value)
+    }
+
+    const [text, setText] = useState('Enter text here2'); 
+    // text = "new text"; // Wrong way to change the state
+    // setText("new text"); // Correct way to change the state
+    return (
+        <div> 
+            <h1>{props.heading}</h1>
+            <div className="mb-3"> 
+            <textarea className="form-control" value={text} onChange={handleOnChange} id="myBox" rows="8"></textarea>
+            </div>
+            <button className="btn btn-primary" onClick={handleUpClick}>Convert to Uppercase</button>
+        </div>
+    )
+}