Home > database >  React enable button if inputs are filled
React enable button if inputs are filled

Time:09-13

I am relatively new to react and javascript so my question is:
How in gods name do I access these two objects directly? I tried using Object.keys without any success.

const [inputList, setInputList] = useState([{action: "", dest: "", }]);
const isEnabled = //how do I check if both action and dest length is > 0???

<Button disabled={!isEnabled}>Continue</Button>

CodePudding user response:

You can use Array#every to validate every object in the array.

const isEnabled = inputList.every(({action, dest})=>action && dest);

CodePudding user response:

I'd recommend just doing this. When one (or both) of the fields in any of the items in inputList has nothing in it, the condition will be true and the button will be disabled.

<Button disabled={inputList.every(({ action, dest }) => !action.length || !dest.length)}>Continue</Button>
  • Related