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;
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter