React Task

Task 1:

Show/Hide

import { useState } from 'react';

function Show() {
    const [name,setName]=useState(true)
function hide(){
   if(true){
    setName(!name)
   }
}

  return (
    <div>
      {name && <h1>Hello Ganapathi</h1>}
      <button onClick={hide}>Click Me</button>
    </div>
  );
}

export default Show;

Output:
Show

Hide

Task 2

Input Field Value:

import { useState } from 'react';
function InputBox() {
const [input,setInput] = useState("");

function handleChange(event){
  setInput(event.target.value);
}
function clearButton(){
    setInput("");
}
  return (
    <div>
      <input type="text" placeholder='Enter your name' onChange={handleChange} value={input} />
      <p>Hello {input}</p>
      <button onClick={clearButton}>Clear</button>
    </div>
  );
}

export default InputBox;

Output:

Task 3

Counter app

import {useState} from 'react';

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

  return (
    <div>
      <p>Counter: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
}

export default Counter;

Output:

Task 4

Toggle Button:

import {useState} from 'react';

function Name(){
    const [changeName, setChangeName] = useState("Off");
function changeFunction(){
    if(changeName === "Off"){
        setChangeName("On");
    }
    else{
        setChangeName("Off");
    }

}

    return(
        <div>
            <h2>On/Off</h2>
            <h3>{changeName}</h3>
            <button onClick={changeFunction}>Button</button>
        </div>
    )
}

export default Name;

Output: