Disabling the continue button when there is no selection from the table-CodePudding

I have a list from backend. This list is displaying the user's invoices. I want the button to be disabled if the user doesn't select at least one invoice. If the user selects at least 1 invoice, I want the button to be active. But the invoices and the button are in different components.

payment-table.js

Here the IDE warns me like this; 'setEnabledButton' is assigned a value but never used.

  const [selectedItems, setSelectedItems] = useState([]);

  const [enabledButton, setEnabledButton] = useState();

  useEffect(() => {
    if (selectedItems.length > 0) {
      setEnabledButton = true;
    } else {
      setEnabledButton = false;
    }
  }, [selectedItems]);

policy-payment-info.js

<div className={hiddenControlButtonClass}>
  <AS.Button variant="outlined" onClick={handlePayment} enabledButton>
    {t('policy-payment-info.continue')}
  </AS.Button>
</div>

CodePudding user response：

First set default state for your useState function :

  const [enabledButton, setEnabledButton] = useState(false);

After this you need to execute the seState by add ()

Like this :

 useEffect(() => {
    if (selectedItems.length > 0) {
      setEnabledButton(true);
    } else {
      setEnabledButton(false);
    }
  }, [selectedItems]);

And then, you need to use this state to enable or disable the button :

<div className={hiddenControlButtonClass}>
  <AS.Button variant="outlined" onClick={handlePayment} disabled={enabledButton}>
    {t('policy-payment-info.continue')}
  </AS.Button>
</div>

CodePudding user response：

Your syntax is a little bit off. setEnabledButton is a function that has to be invoked and given the a certain value. Try this:

const [selectedItems, setSelectedItems] = useState([]);

  const [enabledButton, setEnabledButton] = useState(false);

  useEffect(() => {
    if (selectedItems.length > 0) {
      setEnabledButton(true);
    } else {
      setEnabledButton(false);
    }
  }, [selectedItems]);