React – useState Scenarios

2026 May 26

1) Toggle Button

Switch between "ON" and "OFF"`

      <h1>ToggleButton</h1>
      <img className="base" width="100" height="100" src={isOn ?  " https://images.pexels.com/photos/37705633/pexels-photo-37705633.jpeg " : "https://images.pexels.com/photos/32179609/pexels-photo-32179609.jpeg" } alt="" />
      <button className="base" width="20" height="20" onClick={()=> setOn(!isOn)}>{isOn ? "SUN": "MOON"}</button>

Best state type: Boolean
False => Off
True => On
Initially set to false (Moon mode)

Conditional Rendering
The magic happens with the ternary operator (? :):
src={isOn? "sun-url.jpg" : "moon-url.jpg"}
When isOn = true → shows Sun image
When isOn = false → shows Moon image


onClick={() => setOn(!isOn)}

Every click inverts the current state
!true becomes false
! false becomes true.

---

2) Input Field Value

useState("") / Creates memory for your text (starts empty)
onChange={(e) => setText(e.target.value)} / Captures every keystroke
Hello, {text} / Displays your text instantly

---

3) Show / Hide Text

Best state type: Boolean
False => Hide
True => Show
button onClick={()=>setShow(!show)} - is a created arrow function inside the useState Function. Every click inverts the current state
!true becomes false
! false becomes true.

{show && <p>I am Vignesh K</p>} - condition true show a this line

---

4) CharacterCount

value={count} Links input to React state
onChange={(e)=>setCount(e.target.value)} Updates state on every keystroke

CharacterCount: {count.length}

Displays character count live

---

5) Form with Multiple Inputs

1 const [from, setFrom] = useState({...}) -> Stores all form data in ONE object
2 const handleFrom = (e) => { ( Function that runs on every ) input change
3 ...from ( copies of all existing data )
4 [e.target.name]: e.target.value ( Updates ONLY the field being typed in )
5 ( Each input updates state automatically )
6 < p >Name : {from.name} < / p > ( Displays live data below form )

---