102- Hook

 Use state hook

import './App.css'

import { useState } from 'react';

const InitialState = false;

export default function App() {

    const [toggleText, setToggleText] = useState(InitialState);

    //remark ---- toggleText : variable / setToggleText : method / usestate hook takes an InitialState

    console.log(toggleText)

    function handleToggleText(){

        setToggleText(!toggleText);

    }

    return (

        <div className='App'>

            <div>

                <h3>Use State Hook</h3>

                <div>

                    {

                        toggleText?<p>Hello World</p>:null

                    }

                </div>

                <button onClick={handleToggleText}>Toggle Text</button>

            </div>

        </div>

2nd use state hook

import React from 'react';

import ReactDOM from "react-dom/client";

import { useState } from 'react';

const InitialState = {

    name :'',

    city :''

};

export default function App() {

    const[formData, setFormData]=useState(InitialState);

    return (

        <div className='App'>

            <div>

                <h3>Use State Hook</h3>

                <div>

                    <input type="text" name="name" placeholder='Enter name' />

                    <select name="city">

                        <option value={""} id="">

                            Select City

                        </option>

                        <option value={"Bengaluru"} id="Bengaluru">

                            Bengaluru

                        </option>

                        <option value={"Moki"} id="Moki">

                            Moki

                        </option>

                    </select>

                </div>

            </div>

        </div>