Usestate project

Project-7

import { useState } from "react";


function Dropdown() {
  const [country, setCountry] = useState("");
  const [stateName, setStateName] = useState("");
  const [cityName, setCityName] = useState("");


const state = {
  india : ["tamilnadu","kerala"],
  usa : ["usaState1","usaState2"],
}
const cities = {
  tamilnadu : ["perambalur","ariyalur"],
  kerala : ["keralaState1","kerala"],
  usaState1 : ["usaState1city1","usaState2city2"],
  usaState2 : ["usaState2city1","usaState2city2"],
};


function handleCountry(e){
setCountry(e.target.value);
setStateName("");
setCityName("");

}
function handleState(e){
  setStateName(e.target.value)
  setCityName("")
}

return (
  <>
  <select value={country} onChange={handleCountry} >
    <option value="">select country</option>
    <option value="india">India</option>
    <option value="usa">USA</option>
  </select>
  <select value={stateName} onChange={handleState} >
    <option value="">select stateName</option>

    {country && 
    state[country].map((item,index) => (
      <option key={index} value={item}>{item}</option>
    ))}

    index
  </select>

  <select value={cityName} onChange={(e) => {setCityName(e.target.value)}}>
    <option value="">select city</option>
    {stateName && 
    cities[stateName].map((item,index) => (
      <option key={index} value={item}>{item}</option>
    ))}
  </select>

  <br />

   <h2>Country : {country}</h2>

    <h2>State : {stateName}</h2>

     <h2>City : {cityName}</h2>




  </>
)

}
 export default Dropdown;

OUTPUT;

Project-6

import { useState } from "react";

function CheckboxHandling(){

const [courses, setCourses] = useState([]);

function getUserInput(e) {
    const {value, checked} = e.target;

    checked ? setCourses([...courses, value]) : setCourses(courses.filter((course => course !== value)))

};

return (
    <>
    <label htmlFor="react">React</label>
    <input type="checkbox" id="react" value="react" onChange={getUserInput}/>

    <label htmlFor="HTML">HTML</label>
    <input type="checkbox" id="HTML" value="HTML" onChange={getUserInput}/>

    <label htmlFor="JAVASCRIPT">JAVASCRIPT</label>
    <input type="checkbox" id="JAVASCRIPT" value="JAVASCRIPT" onChange={getUserInput}/>

    <ul>
        {courses.map((course) => (
            <li>{course}</li>
        ))}
    </ul>
    </>
)


}

export default CheckboxHandling;

OUTPUT;