title: React Native button map for a button group
body: <p>Trying to figure out how to change the styling on just the first and last button. <br>How do I tell the button which one is which? <br>Beginner in JS and React/React Native trying to find my way. Currently coming out with no rounded buttons on either end.<br> The Button element in the child is my own wrapper on TouchableOpacity and only accepts an object for the buttonStyles. <br>Any help appreciated.</p>
  
  <p>Parent component:</p>
  
  <pre><code>export class Rating extends React.Component {
  
    ratings = [
      { text: '1' },
      { text: '2' },
      { text: '3' },
      { text: '4' },
      { text: '5' },
    ];
  
    onButtonPress = (e) =&gt; {
      console.log(e.target.value);
    };
  
    render() {
      return (
        &lt;View&gt;
          {this.ratings.length &amp;&amp; (
            this.ratings.map((rating, index) =&gt; (
              &lt;View key={index}&gt;
                &lt;RatingButton rating={rating} onButtonPress={this.onButtonPress} /&gt;
              &lt;/View&gt;
            ))
          )
        }
        &lt;/View&gt;
  
      );
    }
  }
  </code></pre>
  
  <p>Child component:</p>
  
  <pre><code>const buttonStyles = () =&gt; {
    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 (
        &lt;Button
          buttonStyles={styles.allButtons}
          textStyles={styles.buttonText}
          onPress={onButtonPress}
        &gt;
          {rating.text}
        &lt;/Button&gt;
      );
    }
  }
  </code></pre>