React enable button if inputs are filled

Xyba Studios 0
Viewed 27

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>
react-hooks object reactjs arrays javascript
2 Answers

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

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

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>
mstephen190
Related