React Js Check Type of an Input Element

    const { useRef } = React;

    function App() {

      // Create refs for each input element

      const textInputRef = useRef(null);

      const emailInputRef = useRef(null);

      const passwordInputRef = useRef(null);

      const checkboxInputRef = useRef(null);

      const radioInputRef = useRef(null);

​

      // Function to check the type of the input element

      const checkInputType = (inputRef) => {

        if (inputRef.current) {

          const inputType = inputRef.current.type;

          alert(`Input type is: ${inputType}`);

        } else {

          alert('Input element not found');

        }

      };

​

      return (

        <div className='container'>

​

          <div>

            <input ref={textInputRef} type="text" className="text-input" />

            <button onClick={() => checkInputType(textInputRef)} className="check-button">Check Input Type</button>

          </div>

          <div>

            <input ref={emailInputRef} type="email" className="email-input" />

            <button onClick={() => checkInputType(emailInputRef)} className="check-button">Check Input Type</button>

          </div>

          <div>

            <input ref={passwordInputRef} type="password" className="password-input" />

            <button onClick={() => checkInputType(passwordInputRef)} className="check-button">Check Input Type</button>

          </div>

          <div>

            <input ref={checkboxInputRef} type="checkbox" className="checkbox-input" />

            <button onClick={() => checkInputType(checkboxInputRef)} className="check-button">Check Input Type</button>

          </div>

          <div>

            <input ref={radioInputRef} type="radio" className="radio-input" />

            <button onClick={() => checkInputType(radioInputRef)} className="check-button">Check Input Type</button>

          </div>

        </div>

​

      );

    }

​

    ReactDOM.render(<App />, document.getElementById("app"));

  </script>