react

1)Toggle Button:
You build a button that switches between:
"ON" ↔ "OFF"
What type of state should you use?
What is the best initial value?

Toogle.jsx

import { useState } from "react";
function Toogle() {
    const [Switch, setSwitch] = useState("https://www.w3schools.com/js/pic_bulboff.gif");

    function on() {
        setSwitch("https://www.w3schools.com/js/pic_bulbon.gif");
        console.log("ON");
    }
    function off() {
        setSwitch("https://www.w3schools.com/js/pic_bulboff.gif");
        console.log("OFF");
    }
    return (
        <div>
            <h1>Toogle Button</h1>
            <img
                src={Switch} alt="Bulb"
            />
            <button onClick={on}>ON</button>
            <button onClick={off}>OFF</button>
        </div>
    )
}
export default Toogle;

App.jsx


import { useState } from 'react'
import heroImg from './assets/hero.png'
import reactLogo from './assets/react.svg'
import viteLogo from './assets/vite.svg'
import './App.css'
import Toogle from './Toogle'

function App() {

  return (
            <Toogle/>
  )
}

export default App

** OUTPUT:**

2) Input Field Value:
You have a text input.
User types name and you want to display:
Hello, Vijay
Why must the input value be stored in useState?
What happens if you use a normal variable?

Input.jsx

import { useState } from "react";

function Input() {
    const[ name, setName] = useState("");
    function change(event) {
        setName(event.target.value)
    }
    return (
        <div>
            <h1>Type your name here</h1>
            <input type="text"  value={name}
            onChange={change}></input>
            <h3>Hello ,{name}</h3>
        </div>
    )
}
export default Input;

App.jsx

import { useState } from 'react'
import heroImg from './assets/hero.png'
import reactLogo from './assets/react.svg'
import viteLogo from './assets/vite.svg'
import './App.css'
import Input from './Input'

function App() {

  return (
    <Input/>
  )
}

export default App

OUTPUT: