React | State Toggling

-

 

if you are wondering How to toggle Boolean state in react component, then maybe this little code snippet for you...

Ingredients : 

  • HTML
  • CSS
  • React ***

Dependency : 

  • Bootstrap (Only for button)

command: npm start 

import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
 
const App = () => {
 
    const [isLoggedIn, setIsLoggedIn] = useState(true);
    //let isLoggedIn = true; <<<|<<< this approach not work...
 
    // Element Variable
    const buttonText = isLoggedIn ? 'Log Out' : 'Log In';
    const classNameChange = isLoggedIn ? 'danger' : 'success'
 
    const toggleFunction = () => {
        //isLoggedIn = !isLoggedIn; <<<|<<< this approach not work...
        setIsLoggedIn(!isLoggedIn);
    }
 
    const style = {
        textAlign: 'center',
        marginTop: '20px',
        lineHeight: 5
    };
 
    return (
 
        <div style={style}>
 
            {   
            	// Ternary Conditional Operator
                // Conditionally UI or HTML rendering... 
                isLoggedIn ? <h1>Welcome</h1> : <h1>Good By</h1>
            }
 
            <button onClick={toggleFunction} className={'btn btn-' + classNameChange}>
                {buttonText}
            </button>
 
        </div>
    );
};
export default App;

Comments

Post a Comment

Popular posts from this blog

Stack

-
Data-Structure | Linear Category Stack Code Example  // BluePrint || Static Thing class Stack { // LIFO = Last In Fast Out | (Linear) Data-Structure constructor() { // empty stack this.stack = []; } // add new data in stack, one by one add(data) { this.stack.push(data); } // remove data from stack remove() { // for checking, is stack empty or not... if (this.stack.length) { return this.stack.pop(); } } } // ######################################################## // ######################################################## // ######################################################## // Object Creating || Dynamic Thing // Create an object of Stack class const person = new Stack(); person.add('Sam'); person.add('Jon'); person.add('Ken'); person.add('Lee'); // total object calling [its not a good approach] c...
Read more

Diamond Shape by HTML & CSS

-
Image
Diamond Hover Effect You may wonder How to create a diamond shape in HTML, so here it may what you looking at... Ingredients:  HTML  CSS  Main Use Of: Grid Flex Transform HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title>Diamond Shape</title> </head> <body> <!-- .item.item$*9>p.text{$} --> <main> <div class="item item1"> <p class="text">1</p> </div> <div class="item item3"> <p class="text">3</p> </div> <div class="item item6"> <p class="text">6</p> </div> <div class="item item2"> <p class="text">2</p> </div> <div class="item item5"> <p class="text...
Read more

Dictionary

-
Data-Structure | Non-Linear Category Dictionary Code Example class Dictionary { // Time Complexity | Contestant Time // O(1) // empty object constructor() { this.dictionary = {} } // add data as { key : value } pair add(key, value) { this.dictionary[key] = value; } get(key) { return this.dictionary[key]; } } // ######################################################## // ######################################################## // ######################################################## const phoneBook = new Dictionary(); // add data into Dictionary phoneBook.add('Jon', '01717-112233'); phoneBook.add('Sam', '01712-334455'); phoneBook.add('Lee', '01717-556644'); console.log(phoneBook); // Dictionary { // dictionary: { Jon: '01717-112233', Sam: '01712-334455', Lee: '01717-556644' } // } console....
Read more