How to use ternar operator in React Native?-CodePudding

I am trying to change the color of a component depending on the type of pokemon that is being displayed. I have this view inside a parent component that retrievs pokemon from an api. The pokemonType variable is from the api. It registers and I can console.log('pokemonType') which logs the type of pokemon e.g 'grass'. It seems that the ternary operator is not registering the pokemonType and going straight to default. Am I writing this wrong?

                {/* Pokemon Type */}
            <View style={[
                (pokemonType === 'grass') ? styles.grass : styles.pokemonTypeDefault,
                (pokemonType === 'fire') ? styles.fire : styles.pokemonTypeDefault,
                (pokemonType === 'water') ? styles.water : styles.pokemonTypeDefault,
                (pokemonType === 'bug') ? styles.bug : styles.pokemonTypeDefault,
                (pokemonType === 'ghost') ? styles.ghost : styles.pokemonTypeDefault,
                (pokemonType === 'rock') ? styles.rock : styles.pokemonTypeDefault,
                (pokemonType === 'steel') ? styles.steel : styles.pokemonTypeDefault,
                (pokemonType === 'electric') ? styles.electric : styles.pokemonTypeDefault,
            ]}>
                <Text style={styles.pokemonTypeText}>{pokemonType.toUpperCase()}</Text>
            </View>

 const styles = StyleSheet.create({
 
    grass: {
    backgroundColor: '#00FF00',
    width: 250,
    height: 30,
    marginTop: 10,
    marginLeft: 80,
    borderRadius: 50,
},
    fire: {
    backgroundColor: '#FFA500',
    width: 250,
    height: 30,
    marginTop: 10,
    marginLeft: 80,
    borderRadius: 50,
},
   
 }) ..//All the other type styles

  pokemonTypeDefault: {
    width: 250,
    height: 30,
    marginTop: 10,
    marginLeft: 80,
    borderRadius: 50,
    backgroundColor: 'blue',
},

Thanks a lot

CodePudding user response：

The problem is that you're adding styles.pokemonTypeDefault multiple times and thus overwriting your styles.

The way react-native styles work is that when you pass an array of styles, the styles in right side overwrite properties set on the previous elements, in your example if the pokemon type is grass your styles array would look something like

[styles.grass, styles.pokemonTypeDefault, styles.pokemonTypeDefault, styles.pokemonTypeDefault, styles.pokemonTypeDefault, styles.pokemonTypeDefault, styles.pokemonTypeDefault, styles.pokemonTypeDefault]

One simpler and more clear solution would be creating a function to get your styles.

E.g.

                {/* Pokemon Type */}
            <View style={getPokemonTypeStyle(pokemonType)}>
                <Text style={styles.pokemonTypeText}>{pokemonType.toUpperCase()}</Text>
            </View>

const getPokemonTypeStyle = (pokemonType) => {
 switch (pokemonType) {
    case 'grass':
      return styles.grass
    case 'fire':
      return styles.fire
    case 'water':
      return styles.water
    case 'bug':
      return styles.bug
    case 'ghost':
      return styles.ghost
    case 'rock':
      return styles.rock
    case 'steel':
      return styles.steel
    case 'electric':
      return styles.electric
    default:
      return styles.pokemonTypeDefault 
}

 const styles = StyleSheet.create({
 
    grass: {
    backgroundColor: '#00FF00',
    width: 250,
    height: 30,
    marginTop: 10,
    marginLeft: 80,
    borderRadius: 50,
},
    fire: {
    backgroundColor: '#FFA500',
    width: 250,
    height: 30,
    marginTop: 10,
    marginLeft: 80,
    borderRadius: 50,
},
   
 }) ..//All the other type styles

  pokemonTypeDefault: {
    width: 250,
    height: 30,
    marginTop: 10,
    marginLeft: 80,
    borderRadius: 50,
    backgroundColor: 'blue',
},