CODEWITHSUNDEEP
reactjsreact-native
Kerry
Kerry

Reputation: 454

How to write switch statements in JSX react native?

Initially I only got 2 type of button. So I am changing the stylesheet code like this

const AuthButton = ({buttonText, buttonFunc, type, size}) => {
    return (
        <TouchableOpacity
            style={[
                styles.buttonStyle,
                size === 'small' ? styles.buttonSizeSmall : styles.buttonSizeBig,
                type === 'primary'
                    ? styles.primaryBackground
                    : styles.secondaryBackground,
            ]}
            onPress={() => buttonFunc()}>
            <Text
                style={[
                    type === 'primary'
                        ? styles.primaryButtonText
                        : styles.secondaryButtonText,
                ]}>
                {buttonText}
            </Text>
        </TouchableOpacity>

But as the app progress I need to add more state to this button.

From the ? Operator I wanna change to switch statement.

I am thinking of something like this

switch(size){
 case 'small': return  styles.buttonSizeSmall
 case 'medium': return  styles.buttonSizeMedium
 case 'large': return  styles.buttonSizeLarge
 default:  return styles.buttonSizeBig
}

and use it in the JSX, Is this possible. When I add the switch statement directly into the jsx its giving me error

Upvotes: 0

Views: 53

Answers (1)

Sinan Yaman
Sinan Yaman

Reputation: 5946

Method 1

You create a function:

const getStyle = (size) => { 
  switch(size){
   case 'small': return  styles.buttonSizeSmall
   case 'medium': return  styles.buttonSizeMedium
   case 'large': return  styles.buttonSizeLarge
   default:  return styles.buttonSizeBig
  }
}

and call the function in the jsx:

style={[
                styles.buttonStyle,
                getStyle(size),
                type === 'primary'
                    ? styles.primaryBackground
                    : styles.secondaryBackground,
            ]}

Method 2

Or, you can just nest the if statement (less readable in my opinion)

size === 'small' ? styles.buttonSizeSmall : (size === 'large' ? styles.buttonSizeBig : styles.buttonSizeMedium),

Upvotes: 2

Related Questions