Im trying to make it so that when a TouchableHighlight is pressed in react native it goes from one colour to another. I have state that is set to false and changes when the button is pressed. However this changes the colour for all elements in the map rather than for each item individually. Is there a way to update the state for each element independently?Here is my code:
function OnboardingVibes() { const [pressed, setPressed] = useState(false); return (<View style={{marginTop: 40}}><Text style={{fontSize: 22, color: '#FFF', marginBottom: 16}}>Vibes</Text><View style={styles.buttonContainer}> {vibes.map((vibe) => { return (<TouchableHighlight onPress={() => setPressed(true)} style={{backgroundColor: pressed ? '#DDD' : '#4D2C5B', margin: 4, borderRadius: 4}} key={`vibe-${vibe}`}><Text style={styles.vibeButton}>{vibe}</Text></TouchableHighlight> ) })}</View></View> );}