Hey everyone, I have a specific element that I want to conditionally apply multiple styles to.
Initially, I approached it like this:
<Text
style={[
discountCodeState === '' || !isActiveHandler(value)
? [
style.submitText,
isActiveHandler(value) ? style.submitTextActive : null,
]
: discountCodeState === 'success'
? [style.submitText, style.submitTextSuccess]
: [style.submitText, style.submitTextError],
]}
>
{submitText}
</Text>
While this method was effective, it contained quite a bit of repetitive code. Therefore, I revised it to the following:
<Text
style={[
style.submitText,
discountCodeState === '' && isActiveHandler(value)
? style.submitTextActive :
discountCodeState === 'success'
? style.submitTextSuccess
: style.submitTextError,
]}
>
{submitText}
</Text>
Unfortunately, I encountered an issue where style.submitText
seemed to disappear unexpectedly. I am unsure of the reason behind this. Any insights would be greatly appreciated.
Thank you!