Solution

To check hidden input field is empty or not in react js, store the hidden input value in state and check when you want.

Here, we will do a sample example to check, clear, and store value in hidden input in react js.

Snippet

In this snippet, we will see how we are changing the state of hidden input.

const [str, setStr] = useState("");

const StoreDataIntoHiddenInput = () => {
  setStr("token");
};

const ClearHiddenInput = () => {
  setStr("");
};

const CheckHiddenInput = () => {
  alert(str ? "Have value" : "Empty");
};

Example

In this example, we will create hidden input and write a function for storing, clearing, and checking hidden input values and call the function on the click of a button.

Let’s start coding…

import React, { useState } from "react";
export default function App() {
  const [str, setStr] = useState("");

  const StoreDataIntoHiddenInput = () => {
    setStr("token");
  };

  const ClearHiddenInput = () => {
    setStr("");
  };

  const CheckHiddenInput = () => {
    alert(str ? "Have value" : "Empty");
  };

  return (
    <div className="App">
      <input type="hidden" value={str} />
      <h1>
        {`Hidden Input Value:`}
        <span>{str ? str : "Empty"}</span>
      </h1>
      <button onClick={StoreDataIntoHiddenInput}>
        Store Data In Hidden Input
      </button>
      <button onClick={ClearHiddenInput}>Clear Data In Hidden Input</button>
      <button onClick={CheckHiddenInput}>Check Data In Hidden Input</button>
    </div>
  );
}

Output

hidden-input, check value

codesandbox