Resolved: Disabling the continue button when there is no selection from the table

Question:

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>

Answer:

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>

If you have better answer, please add a comment about this, thank you!

Resolved: Disabling the continue button when there is no selection from the table

Resolved: When converting markdown to latex with pandoc, how can I end a block before the next heading?

Resolved: TYPO3 SQL error: Field ‘tx_imagezoom_set’ doesn’t have a default value

Resolved: std::regex_replace to replace multiple combinations

Leave A Reply