Image for post
Image for post

React Hooks Demo: Working True False Toggle vs. Click Counter Button

I got a true false toggle working, it seems states might need to be a little deeper than I thought they needed to be (i.e. using isTrue not just the state)

Code Sandbox:

import React, { useState } from "react";import ReactDOM from "react-dom";import "./styles.css";function App() {const [stateTF, setStateTF] = useState({ isTrue: false });const toggleTrueFalse = () => {if (stateTF.isTrue) return setStateTF({ isTrue: false });else setStateTF({ isTrue: true });};const getTrueFalseAsString = () => {if (stateTF.isTrue) return "true";else return "false";};const [state, setState] = useState({ counter: 0 });const add1ToCounter = () => {const newCounterValue = state.counter + 1;setState({ counter: newCounterValue });};return (<div className="App"><h1>β­οΈβ€οΈβ˜•πŸβ˜„β›±β›·β˜€οΈβ˜˜οΈ</h1><h2>Your toggle is {getTrueFalseAsString()} πŸ₯³</h2><button onClick={toggleTrueFalse}><h3>Toggle me</h3></button><h2>You clicked below {state.counter} times πŸ₯³</h2><button onClick={add1ToCounter}><h3>Click me</h3></button><h1>β­οΈβ€οΈβ˜•πŸβ˜„β›±β›·β˜€οΈβ˜˜οΈ</h1></div>);}const rootElement = document.getElementById("root");ReactDOM.render(<App />, rootElement);

πŸ€“ The physical therapist who writes JavaScript πŸ’ͺ Web Developer 😎 Mentor 🧠 DPT πŸ˜„ SEO Expert 😁 React πŸ˜† Jamstack πŸ’¬ Ask me anything πŸ‘‰ πŸ‘ˆ

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store