How do I control an empty input?

I am creating my first component in React and I have problems with the logic of how to control or detect when an input is empty.

The idea is to change the class of the input according to its content, that is

If the input is not empty, change the border color to green, If the input is empty, change the color of the border to gray.

the logic works when the input has a text, the problem is when I delete the content the input does nothing, until I write a letter again the message "input is empty" and "input with data" is activated

Why?

Login Component

const { useEffect, useState } = React;

const Login = function () {
  const [formState, setformState] = useState({
    isActive: true,
    inputEmail: "",
  });

  const { isActive, inputEmail } = formState;
  useEffect(
    function () {
      // console.log("hello");
    },
    [inputEmail]
  );

  const handleInputChange = function (e) {
    if (inputEmail == "") {
      console.log("input is empty");
      setformState({ ...formState, [e.target.name]: e.target.value, isActive: false });
    } else {
      setformState({ ...formState, [e.target.name]: e.target.value, isActive: true });
      console.log("input with data");
    }
  };

  return (
    <input type="text" name="inputEmail" className={`inputClass ${isActive ? "inputSelected" : ""}`} autoComplete="off" onChange={handleInputChange} />
  );
};
ReactDOM.render(<Login />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

CodePudding user response：

You are using the last value of state for your logic, so it appears that it is always one step behind.

You should also default your state for isActive to be false since the input value is initially false.

Instead, use the new value located in e.target.value like below:

I've changed the style to be inline, and the color to affect the background for a clearer demonstration.

const { useEffect, useState } = React;

const Login = function () {
  const [formState, setformState] = useState({
    isActive: false,
    inputEmail: "",
  });

  const { isActive, inputEmail } = formState;

  const handleInputChange = function (e) {
    if (e.target.value == "") {
      console.log("input is empty");
      setformState({ ...formState, [e.target.name]: e.target.value, isActive: false });
    } else {
      setformState({ ...formState, [e.target.name]: e.target.value, isActive: true });
      console.log("input with data");
    }
  };

  return (
    <input type="text" name="inputEmail" style={{ backgroundColor: isActive ? "green" : ""}} autoComplete="off" onChange={handleInputChange} />
  );
};
ReactDOM.render(<Login />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Simplified Example

Depending on your requirments, you may be able to simplify this significantly.

If isActive is always to reflect whether or not inputEmail is empty or not, then you can omit it from state and determine it each render.

This means you don't need a condition in handleInputChange and can update it the same way no matter what.

I would also recommend setting the input value prop explicitly instead of just relying on them staying in sync.

const { useEffect, useState } = React;

const Login = function () {
  const [formState, setformState] = useState({
    inputEmail: "",
  });

  const { inputEmail } = formState;

  const handleInputChange = function (e) {
    setformState({ ...formState, [e.target.name]: e.target.value });
  };

  return (
    <input type="text" name="inputEmail" value={inputEmail} style={{ backgroundColor: !!inputEmail ? "green" : ""}} autoComplete="off" onChange={handleInputChange} />
  );
};
ReactDOM.render(<Login />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

CodePudding user response：

You should be checking the incoming value which is e.target.value

  const handleInputChange = function (e) {
    if (e.target.value == "") {//<--
      console.log("input is empty");
      setformState({ ...formState, [e.target.name]: e.target.value, isActive: false });
    } else {
      setformState({ ...formState, [e.target.name]: e.target.value, isActive: true });
      console.log("input with data");
    }
  };