React tasks

Task - 1) Toggle Button:

import { useState } from "react";

function Bulb(){
    const [bulb,setBulb] = useState("https://www.w3schools.com/js/pic_bulboff.gif")

    function On(){
        setBulb("https://www.w3schools.com/js/pic_bulbon.gif")
    }
    function Off(){
        setBulb("https://www.w3schools.com/js/pic_bulboff.gif")
    }

    return(
        <div className="div">
            <h1>bulb on/off</h1>
            <img src={bulb} alt="" />
            <button onClick={On}>on</button>
            <button onClick={Off}>off</button>
        </div>
)
}
export default Bulb;

Output:

Task - 2) Input Field Value:

import { useState } from "react";

function Inputfield(){
    const [char,setChar] = useState(" ")

    function Character(){
      const newchar =  document.getElementById("one")
      const element =  newchar.value
      setChar(element)
    }
    return(
        <div className="inputdiv">
            <input onChange={Character} id="one" type="text" />
            <h2>hello, {char}</h2>
        </div>
    )
}
export default Inputfield;

Output:

Task - 3) Show/Hide Text

import { useState } from "react";

function Showhide(){
    const [char,setChar] = useState("")

    function show(){
        setChar("Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veritatis, distinctio!")
    }
    function hide(){
        setChar("")
    }
    return(
        <div className="div">
            <button onClick={show}>show</button>
            <button onClick={hide}>hide</button>
            <p id="new">{char}</p>
        </div>
    )
}
export default Showhide;

Output:

Task - 4) Character Counter

import { useState } from "react";

function Charcounter(){
    const [char,setChar] = useState(" ")

    function Character(){
      const newchar =  document.getElementById("one")
      const element =  newchar.value.length
      setChar(element)
    }
    return(
        <div className="inputdiv">
            <input onChange={Character} id="one" type="text" />
            <h2>{char}</h2>
        </div>
    )
}
export default Charcounter;

Output: