toggle button disable based on state

[rbureau85]

Hey All,
I have been trying to toggle the button disable based on a useState (React). If I do disabled={started === true ? true : false} the button becomes useless and it cannot be clicked but does not style like it's disabled if I do {...started === true ? "disabled" : null} I get a

InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '0' is not a valid attribute name.

here's a sandbox to show how the onClick function gets lost if you used disable = {} vs {...props}

https://codesandbox.io/s/busy-albattani-lx1dn?file=/src/App.tsx

[micahjones13]

Hey there,

If you use undefined rather than false when setting disabled state, that should fix the problem. Here's a code sandbox example https://codesandbox.io/s/peaceful-cartwright-jzzod
Because Stencil's react output target handles the boolean prop bindings like non-react components, it ends up reading disabled='false' rather than just omitting disabled altogether in the dom. We have a fix implemented already and it'll be released in the next version.
Thanks for bringing this up!

[rbureau85]

This works for non rc. I had also tried 'null' but that does not work only undefined does.

[markacianfrani]

hey @rbureau85, because we don't have an exact timeframe for 6.1 yet (though it will be soon), you can use the 6.1rc to unblock you for now.

npm i @astrouxds/react@6.1-rc

This rc should be completely stable. Once it's released you can go back to use @astrouxds/react. Let us know if you have any issues with that (release candidates are a new workflow we're working on)

[rbureau85]

thank you both. I will try the undefined first if not I will go to the rc but we leave next Friday for field testing so trying to get this working asap