React Js Check Type of an Input Element

React Js Check Type of an Input Element:In React.js, checking the type of an input element involves accessing its type attribute. By using ref or event handling methods like onChange, developers can examine the input element's type dynamically. For example, with a ref approach, developers create a reference to the input element and access its type property using ref.current.type. Alternatively, with event handling, they can capture the event object and inspect the target element's type attribute via event.target.type. This enables React developers to adapt their logic based on the input element's type, ensuring precise handling of user interactions within the application.

written

reviewed

updated

How can you check the type of an input element in a React js?

This React.js code defines an App component that includes several input elements of different types, such as text, email, password, checkbox, and radio buttons. Each input element has a corresponding button next to it. When you click one of these buttons, it triggers the checkInputType function, which checks the type of the input element using React's useRef hook. It then displays an alert with the input element's type. If the input element doesn't exist, it alerts that the input element was not found. This code allows you to check and display the type of various input elements within a React application.

 <script type="text/babel">
    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>

Run

Output of Above Example

Pasted Image

React JS Tutorial

React Js Check Type of an Input Element

Feedback for Abhishek

How can you check the type of an input element in a React js?