Logical AND (&&) and OR (||) operators confusion

Question

I'm still getting confused with the logical operator. My case is that I'm using React.js component such as below:

const Component = () => {
   const [data, setData] = useState({
      date: "",
      value: "",
   })

   const [disabled, setDisabled] = useState(true);

  useEffect(() => {
    if (data.date !== "" && data.value !== "") {
      setDisabled(false);
    } else if (data.date === "" || data.value === "") {
      setDisabled(true);
    }
  }, [data.date, data.value]);

  return <Button disabled={disabled} />
}

So my case here is that I have a state consisting of date and value where I receive an input from a user. If the input for one of the state (date or value) is empty, I want the button to be disabled. From my understanding, the logical operator should be correct. What happens right now is that the Button will be enabled once both input has been filled. However, if I emptied one of the field, it doesn't get disabled. Only when I empty both input field then Button would get disabled. What am I doing wrong here? Thank you so much in advance

UPDATE How I'm changing the state is by:

const handleDate = (_, dateString) => {
   setData({...data, date: dateString});
}

<DatePicker onChange={handleDate} />
<InputNumber onChange={(value) => {setData({...data, value: value})} />

*Note: I'm using Ant Design Input and Datepicker

Answer 1

Instead of using

else if

use

useEffect(() => {
if (data.date !== "" && data.value !== "") {
  setDisabled(false);
} else {
  setDisabled(true);
}

}, [data.date, data.value]);

I assume you are using useState correctly whilek changing date and value. Do keep us updated ;-)

Answer 2

Or means at least one of them. AND means both simultaneously.

So your OR (data.date === "" || data.value === "") means when at least one of them is empty it is true; therefore disabled. And your AND (data.date !== "" && data.value !== "") means if both of them are non empty simultaneously then true, in every other case false.