CODEWITHSUNDEEP
javascriptcssbuttonreact-native
StuffedPoblano
StuffedPoblano

Reputation: 695

React Native button map for a button group

Trying to figure out how to change the styling on just the first and last button.
How do I tell the button which one is which?
Beginner in JS and React/React Native trying to find my way. Currently coming out with no rounded buttons on either end.
The Button element in the child is my own wrapper on TouchableOpacity and only accepts an object for the buttonStyles.
Any help appreciated.

Parent component:

export class Rating extends React.Component {

  ratings = [
    { text: '1' },
    { text: '2' },
    { text: '3' },
    { text: '4' },
    { text: '5' },
  ];

  onButtonPress = (e) => {
    console.log(e.target.value);
  };

  render() {
    return (
      <View>
        {this.ratings.length && (
          this.ratings.map((rating, index) => (
            <View key={index}>
              <RatingButton rating={rating} onButtonPress={this.onButtonPress} />
            </View>
          ))
        )
      }
      </View>

    );
  }
}

Child component:

const buttonStyles = () => {
  const allButtons = {
    backgroundColor: sc.colors.white.white,
    borderWidth: 1.5,
    borderColor: sc.colors.blue.darker1,
    padding: sc.padding.lg,
  };

  const startButton = {
    borderTopLeftRadius: sc.borderRadius.sm,
    borderBottomLeftRadius: sc.borderRadius.sm,
    borderRightWidth: 0.75,
    ...allButtons,
  };

  const endButton = {
    borderTopRightRadius: sc.borderRadius.sm,
    borderBottomRightRadius: sc.borderRadius.sm,
    borderLeftWidth: 0.75,
    ...allButtons,
  };
  return StyleSheet.create({
    allButtons,
    startButton,
    endButton,
    buttonText: {
      color: sc.colors.blue.darker1,
      fontSize: sc.font.size.largeContent,
    },
  });
};

class RatingButton extends React.Component {

  render() {
    const { onButtonPress, rating } = this.props;
    const styles = buttonStyles();
    return (
      <Button
        buttonStyles={styles.allButtons}
        textStyles={styles.buttonText}
        onPress={onButtonPress}
      >
        {rating.text}
      </Button>
    );
  }
}

Upvotes: 2

Views: 2906

Answers (1)

Miroslav Glamuzina
Miroslav Glamuzina

Reputation: 4587

Inside of your ratings variable, you could store another attribute for style like so: 

ratings = [
    { text: '1', style: {backgroundColor:'red'} },
    { text: '2' },
    { text: '3' },
    { text: '4' },
    { text: '5', backgroundColor: 'yellow' },
  ];

And then inside of <RatingButton/> you can add the style to the element 

<Button
        buttonStyles={styles.allButtons}
        textStyles={styles.buttonText}
        onPress={onButtonPress}
        style={rating.style}
      >
        {rating.text}
</Button>

Note: You could also pass a class through the rating variable.

ratings = [
    { text: '1', buttonStyle: 'startButton' },
    { text: '2' },
    { text: '3' },
    { text: '4' },
    { text: '5', buttonStyle: 'endButton' },
  ];

and set your style like this: 

<Button
        buttonStyles={ratings.buttonStyle?styles[rating.buttonStyle]:styles.allButtons}
        textStyles={styles.buttonText}
        onPress={onButtonPress}
        style={rating.style}
      >
        {rating.text}
</Button>

Upvotes: 1

Related Questions