import React, {useState} from "react";
import Form from "./Form";
var isLoggedIn = false;

// the function use state is compose by a value and function that will update the value
// in the below code it is used the destructuring concept which is assign a name to eache array value so you can call the exact value by calling just the name example 
// const [name1, name2] = [value1, value2]
/// when you call or consle.log(name1) will show you the value1 as result
function App() {
  const [myCount, nextState] = useState(0) // useState need to be in a function
  
  function increase(){
    nextState(myCount + 1)
  }
  function decrease(){
    nextState(myCount - 1)
  }
  return <div className="container">
  {isLoggedIn === true ? <h1>Hello Men</h1> : <Form />}
  <br />
  <h1>{myCount}</h1>

  <button onClick={increase}>+</button>
  <button onClick={decrease}>-</button>

  </div>;
}

export default App;