incorporate use state

src/App.js

@@ -1,22 +1,5 @@
 import './App.css';
 
-// array destructuring
-
-//access third element using destructuring
-/* const [,,third] = ["jess","sapato","pé"]
-console.log(third) // pé */
-
-// access first element by position using destructuring
-/* const [first] = ["jess","sapato","pé"]
-console.log(first) //jess */
-
-//access by position
-/* const names = ["jess","sapato","pé"]
-console.log(names[0]) //jess */
-
-// object destructuring
-
-// using destructuring props
 function App({name}) {
   return (
     <div className="App">
@@ -25,13 +8,4 @@ function App({name}) {
   );
 }
 
-// using props
-/* function App(props) {
-  return (
-    <div className="App">
-      <h1>Hello,{props.name}</h1>
-    </div>
-  );
-} */
-
 export default App;

src/index.js

@@ -1,7 +1,25 @@
-import React from 'react';
+import React, {useState} from 'react'; //useState is a function, this is why i use { }
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
+
+function App() {
+  //state function
+const [status, setStatus] = useState("open");//a function to change the state
+
+//state variable
+/* const [status] = useState("open") //the current state
+console.log(status) // open */
+
+//what is useState?
+/* const result = useState;
+console.log(result) // a array with 2 itens - 0:undefined 1:()=> - a fuction */
+  return (
+      <>
+      <h1>the door is:{status}</h1>
+      <button onClick={()=> setStatus("close")}>Close</button>
+      </>
+  );
+}
 
 ReactDOM.render(
   <React.StrictMode>