UseState - Exercises

*Toggle Button *

import { useState } from "react";

function Toggle(){

   const [bulb,setBulb] = useState("https://www.w3schools.com/js/pic_bulboff.gif")
//    const [flag,setFlag] = useState(false);





   function toggle(){
    if (bulb === "https://www.w3schools.com/js/pic_bulboff.gif"){
        setBulb("https://www.w3schools.com/js/pic_bulbon.gif")
        // setFlag(true);
    }
    else{
        setBulb("https://www.w3schools.com/js/pic_bulboff.gif")
        // setFlag(false);
    }
   }



    return(
        <>
        <img src= {bulb}></img>
        <button onClick = {toggle}>{bulb==="https://www.w3schools.com/js/pic_bulboff.gif"?"ON":"OFF"}</button>
        </>

    )


}

export default Toggle

output:

Input Field Value

import { useState } from "react";

function Input(){

    const[name,setName] = useState('')




    return(
    <>
      <input value={name} type="text" onChange={(e)=>setName(e.target.value)}></input>
        <p>Hi! Welcome {name}</p>
        </>

    )

}

export default Input

Output:

Show/Hide Text

function Show(){

    const[text,setText] = useState("");
    const[show,setShow] = useState(false);



    function showContent(){
        if(show===false){
             setShow(true);
        }
        else{
            setShow(false);
        }

    }

    return(
        <>
        <input type="password" onChange={(e)=>setText(e.target.value)}></input>
        <button onClick={showContent}>{show===false ?"Show":"Hide"}</button>
        {show && <p>{text}</p>}
        </>

    )
}

export default Show 

Output:

Character Counter

import { useState } from "react";

function Character (){

const [count,setCount] = useState(0);

    return(
        <>
        <input type="text" onChange={(e)=>setCount(e.target.value.length)}></input>
        <p>Count :{count} </p>
        </>

    )
}

export default Character

Output:

Form with Multiple Input

import { useState } from "react";


function Multiple(){

    const[name,setName]= useState('');
    const[email,setEmail]= useState('');
    const[number,setNumber]= useState('');
    const[city,setCity]= useState('');
    const[password,setPassword]= useState('');



    return(
        <>
        <input type="text" onChange={(e)=>setName(e.target.value)}></input>
        <input type="email" onChange={(e)=>setEmail(e.target.value)}></input>
        <input type="text" onChange={(e)=>setNumber(e.target.value)}></input>
        <input type="text" onChange={(e)=>setCity(e.target.value)}></input>
        <input type="password" onChange={(e)=>setPassword(e.target.value)}></input>
        </>
    )
}

export default Multiple

CheckBox Selection List

import { useState } from "react";

function Selection(){

    const [value,setValue] = useState([]);
    const [checked,setChecked] = useState(false);

   function addValue(e) {

        const checked = e.target.checked;
        const item = e.target.value;

        if (checked) {
            setValue([...value, item]);
        } else {
            setValue(value.filter((val) => val !== item));
        }
    }

    return(
        <>
        <input value="React" type="checkbox" onChange={addValue}></input>
        <label>React</label>
        <input value="Node" type="checkbox" onChange={addValue}></input>
        <label>Node</label>
        <input value="Java" type="checkbox" onChange={addValue}></input>
        <label>Java</label>
        <input value="SQL" type="checkbox" onChange={addValue}></input>
        <label>SQL</label>

        <ul>
                {value.map((val, index) => (
                    <li key={index}>{val}</li>
                ))}
            </ul>
        </>
    )
}

export default Selection

Output:

Dependent Dropdown

import { useState } from "react";

function Dependent() {

    const states = {
        india: ["tamilnadu", "kerala"],
        usa: ["arizona", "newyork"]
    };

    const cities = {
        tamilnadu: ["chennai", "trichy"],
        kerala: ["trivandrum", "kochi"],
        arizona: ["phoenix"],
        newyork: ["washington"]
    };

    const [country, setCountry] = useState("");
    const [state, setState] = useState("");
    const [city, setCity] = useState("");

    return (
        <>

            <select value={country}
         onChange={(e) => {
        setCountry(e.target.value);
        setState("");
        setCity("");
        }}
        >   

                <option value="">Select Country</option>

                <option value="india">India</option>

                <option value="usa">USA</option>

            </select>


            <select value={state} onChange={(e) => {
                setState(e.target.value);
                setCity("");

            }

            }>

                <option value="">Select State</option>

                {
                    country &&
                    states[country].map((val, index) => (
                        <option key={index} value={val}>
                            {val}
                        </option>
                    ))
                }

            </select>


            <select value={city} onChange={(e) => setCity(e.target.value)}>

                <option value="">Select City</option>

                {
                   country && state &&
                    cities[state].map((val, index) => (
                        <option key={index} value={val}>
                            {val}
                        </option>
                    ))
                }

            </select>


        </>
    );
}

export default Dependent;

Output: