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