Select and unselect component when one is selected - react-native

Question

I've to display three components (cards) from which the user can select one. I've placed those three components inside a ScrollView as:
...
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
<LocationAndPriceCard
price={'100'}
title={'Choice 3'} />
<LocationAndPriceCard
price={'200'}
title={'Choice 2'} />
<LocationAndPriceCard
price={'300'}
title={'Choice 1'}} />
</ScrollView>
...
Here is how LocationAndPriceCard is coded:
...
function LocationAndPriceCard({ price, title }) {
const [selectedLocation, setSelectedLocation] = useState("red")
const styles = getStyles(selectedLocation);
const selected = () => {
if (selectedLocation == "red") {
setSelectedLocation("green")
} else {
setSelectedLocation("red")
}
}
return (
<TouchableOpacity style={styles.frame} onPress={selected}>
<Text style={styles.priceTxt}>RM {price}</Text>
<Text style={styles.title} numberOfLines={2}>{title}</Text>
</TouchableOpacity>
);
}
const getStyles = (borderC) => StyleSheet.create({
frame: {
borderWidth: 1,
borderColor: borderC,
width: 180,
backgroundColor: '#fff',
borderRadius: 8,
margin: 5,
padding: 10,
},
...
In the code above when the cad has selected it successfully change the border color to green but I can change the color of all the components. I want to make it like if one is selected all others should go back to red color.

Answer 1

Create two new props for LocationAndPriceCard, value and onPress.
Use value to determine which card is selected and based on that change the border color.
Use the onPress function to set the state which will have the title of the selected card, which we will be used to determine which card is selected.
Full Working Example: Expo Snack
import React, { useState } from 'react';
import {
Text,
View,
StyleSheet,
ScrollView,
TouchableOpacity,
} from 'react-native';
import Constants from 'expo-constants';
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
export default function App() {
const [selected, setSelected] = useState(null);
const handleSelected = (value) => {
setSelected(value);
};
return (
<View style={styles.container}>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
<LocationAndPriceCard
price={'100'}
title={'Choice 3'}
onPress={handleSelected}
value={selected}
/>
<LocationAndPriceCard
price={'200'}
title={'Choice 2'}
onPress={handleSelected}
value={selected}
/>
<LocationAndPriceCard
price={'300'}
title={'Choice 1'}
onPress={handleSelected}
value={selected}
/>
</ScrollView>
</View>
);
}
function LocationAndPriceCard({ price, title, onPress, value }) {
return (
<TouchableOpacity
style={[styles.frame, { borderColor: value === title?"green":"red" }]}
onPress={()=>onPress(title)}>
<Text style={styles.priceTxt}>RM {price}</Text>
<Text style={styles.title} numberOfLines={2}>
{title}
</Text>
</TouchableOpacity>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
frame: {
borderWidth: 1,
width: 50,
height: 50,
backgroundColor: '#fff',
borderRadius: 8,
margin: 5,
padding: 10,
},
});