I have 3 buttons in my react native app. When user clicks button 1 I need to change it color to orange. But other buttons should have the default color (grey). If user clicks the button 3 next time, color should change to orange ,but that 1st button color should reset to default. I'm totally new to react native and this is what I tried. But it applies for all buttons. I know if I can have multiple states with unique Id , it can be done. But I don't know the method.

```
<Text style={ styles.switchButtonsTitle }>Choose Type of User</Text>
<TouchableOpacity onPress={(userType) =>
    this.selectionOnPress("BASIC")} >
    <Text style={_style}>
        <Text style={styles.switchButtonsText}>BASIC</Text>
    </Text>
</TouchableOpacity>

<TouchableOpacity onPress={(userType) =>
    this.selectionOnPress("INTERMEDIATE")}>
    <Text style={_style}>
        <Text style={styles.switchButtonsText}>INTERMEDIATE</Text>
    </Text>
</TouchableOpacity>

<TouchableOpacity onPress={(userType) =>
    this.selectionOnPress("ADVANCED")}>
    <Text style={{backgroundColor: this.state.backgroundColor}}>
        <Text style={styles.switchButtonsText}>ADVANCED</Text>
    </Text>
</TouchableOpacity>

```

selectionOnPress

```
selectionOnPress(userType) {
    this.setState({
        onClicked: true
    });
} 

```

props

```
constructor(props) {
    super(props);
    this.state = {
        onClicked: false
    }
    this.selectionOnPress = this.selectionOnPress.bind(this)
}

```

render(not adding the all codes, only added the useful codes for this post)

```
render() {
    var _style;
    if (this.state.onClicked) { // clicked button style
        _style = {
            backgroundColor: "red"
        }
    }
    else { // default button style
        _style = {
            backgroundColor: "blue"
        }
    }

```