From 103f5b811ec987bd8ba9377fecaef92349f61b28 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9ssica=20F=C3=A9lix?=
 <37668064+Jeefelix@users.noreply.github.com>
Date: Wed, 2 Mar 2022 21:35:40 -0300
Subject: [PATCH] a controlled component with useState

---
 src/index.js | 27 +++++++++++++++++----------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/index.js b/src/index.js
index e66b50a..c8c826d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,25 +1,32 @@
-import React, {useRef} from "react";
+import React, {useState} from "react";
 import ReactDOM from "react-dom";
 import "./index.css";
 
 export default function App() {
-  const sound = useRef();
-  const date = useRef();
+  const [name, setName] = useState("")
+  const [birth, setBirth]= useState("")
 
+  //controlled components are those in which
+  // form data is handled by the component's state
   const submit = (e) => {
     e.preventDefault();
-    const soundValue = sound.current.value;
-    const dateValue = date.current.value;
-    alert(`${soundValue} born in ${dateValue}`);
-    sound.current.value = "";
-    date.current.value = "";
+    alert(`${name} was born in ${birth}`);
+    setName("")
+    setBirth("")
   };
 
   return (
     <form onSubmit={submit}>
-      <input ref={sound} type="text" placeholder="name..." />
+      <input value={name} 
+      type="text" 
+      placeholder="name..." 
+      onChange={(e)=> setName(e.target.value)}
+      />
 
-      <input ref={date} type="date" />
+      <input value={birth}
+       type="date"
+       onChange={(e)=> setBirth(e.target.value)}
+        />
 
       <button>Submit</button>
     </form>