state

src/App.js

@@ -1,8 +1,11 @@
 import './App.css';
+import { useState } from 'react';
+
+function Square() {
+  const [value, setValue] = useState(null);
 
-function Square({ value }) {
   function handleClick() {
-    console.log('clicked!');
+    setValue('X')
   }
 
   return ( 
@@ -19,19 +22,19 @@ function App() {
   return (
   <>
   <div className="board-row">
-    <Square value="1"/>
-    <Square value="2"/>
-    <Square value="3"/>
+    <Square />
+    <Square />
+    <Square />
   </div>
   <div className="board-row">
-    <Square value="4"/>
-    <Square value="5"/>
-    <Square value="6"/>
+    <Square />
+    <Square />
+    <Square />
   </div>
   <div className="board-row">
-    <Square value="7"/>
-    <Square value="8"/>
-    <Square value="9"/>
+    <Square />
+    <Square />
+    <Square />
   </div>
   </>
   );