react-2

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?

import {useState} from "react";

function Toggle(){
        const [isOn, setisOn]=useState(false);

let buttonText;
        if (isOn) {
        buttonText = "ON";
        } else {
        buttonText = "OFF";
        }

        return(
            <button onClick={()=>setisOn(!isOn)}>
                {buttonText}
            </button>
        )
}

export default Toggle;

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?

import React, { useState } from "react";

function Input() {
  const [name, setName] = useState("");

  function handleChange(event) {
    setName(event.target.value);
  }

  return (
    <div>
      <input type="text" value={name} onChange={handleChange} />
      <p>Hello, {name}</p>
    </div>
  );
}

export default Input;

3)Show/Hide Text
You want to show paragraph only when button is clicked.
What kind of state works best?
Why boolean is suitable here?

import { useState } from "react";

function Showhide() {
  const [isVisible, setIsVisible] = useState(false);

  function toggleText() {
    if (isVisible) {
      setIsVisible(false); 
    } else {
      setIsVisible(true);  
    }
  }

  let buttonLabel;
  if (isVisible) {
    buttonLabel = "Hide";
  } else {
    buttonLabel = "Show";
  }

  return (
    <div>
      <button onClick={toggleText}>
        {buttonLabel}
      </button>

      {isVisible && <p>This is the secret text!</p>}
    </div>
  );
}

export default Showhide;

4)Character Counter
User types in textarea. You show number of characters.
How do you track text length?
Should you store both text and length in state?

import{ useState } from "react";

function Crccounter() {
  const [text, setText] = useState("");

  function character(event) {
    setText(event.target.value);
  }

  return (
    <div>
      <textarea value={text} onChange={character} />
      <p>Character count: {text.length}</p>
    </div>
  );
}

export default Crccounter;

5)Form with Multiple Inputs
You have 5 input fields (name, email, phone, city, password).
Better to use:
5 separate useState?
OR one object state?
Why?
What problem happens if you update object state incorrectly?

import { useState } from "react";

function Minputs() {
  const [form, setForm] = useState({
    name: "",
    email: "",
    phone:"",
    city:"",
    password:""
  });

  function handleChanger(e) {
    setForm({ ...form, [e.target.name]: e.target.value });
  }



  return (
    <div>
      <form>
        <label htmlFor="name">Name</label>
        <input 
          type="text" 
          id="name" 
          name="name" 
          value={form.name} 
          onChange={handleChanger} 
        />

        <label htmlFor="email">Email</label>
        <input 
          type="text" 
          id="email" 
          name="email" 
          value={form.email} 
          onChange={handleChanger} 
        />

        <label htmlFor="phone">Phone</label>
        <input type="text" name="phone" value={form.phone}  onChange={handleChanger} />

        <label htmlFor="city">City</label>
        <input type="text" name="city" value={form.city} onChange={handleChanger}  />

        <label htmlFor="password">Password</label>
        <input type="password" name="password" value={form.password} onChange={handleChanger} />
      </form>

      <p>Entered Name: {form.name}</p>
      <p>Entered Email: {form.email}</p>
      <p>Entered No: {form.phone}</p>
      <p>Entered location: {form.city}</p>
      <p>Entered code: {form.password}</p>
    </div>
  );
}

export default Minputs;

6) Checkbox Selection List
User can select multiple skills:
☐ React
☐ Node
☐ Java
☐ SQL
What should be the state type?
How will you add/remove values from state array?

7) Dependent Dropdown
Country → State → City dropdown.
How will you structure state?
When country changes, what should happen to state & city?

import { useState } from "react";

function Cascading(){
    const [country, setCountry]=useState("")

    function handling(event){
        setCountry(event.target.value);
    }


    return(
    <div>
        <select name="" id="" onChange={handling}>

        <option value="">select country</option>
        <option value="India">India</option>
        <option value="Usa">Usa</option>

        </select>

        <select name="" id="">
                <option value="">select state</option>
                {
                    country == "India" &&
                    <>
                        <option value="tamilnadu">TamilNadu</option>
                        <option value="kerala">Kerala</option>
                    </>
                }
                {
                    country == "Usa" &&
                    <>
                        <option value="newyork">NewYork</option>
                        <option value="losvegas">Losvegas</option>
                    </>
                }
            </select>


    </div>

    )
}

export default Cascading;