CODEWITHSUNDEEP
javascriptreactjslogical-operators
Owenn
Owenn

Reputation: 1160

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

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

Upvotes: 0

Views: 216

Answers (3)

Utkarsh
Utkarsh

Reputation: 11

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 ;-)

Upvotes: 1

digitalniweb
digitalniweb

Reputation: 1142

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.

Upvotes: 0

Nina Scholz
Nina Scholz

Reputation: 386868

You could set if not having date or not having value.

setDisabled(!data.date || !data.value);

Upvotes: 1

Related Questions