How to make independent style change on React mapped component - reactjs

Question

I have problem when I try to change the style of a mapped TouchableOpacity.
I map a list of TouchableOpacity and I would like that when I click on one, the backgroundColor change (in black) only on the on I clicked but also to reset the backgroundColor of the other TouchableOpacity I clicked before.
So for example, if I click on the first TouchableOpacity the background of that one become black. And after, if I click on the second, the background of the second become black but the background of the first become again grey.
export default class Playground extends Component {
state = {
isPressed: false
};
handlePress = () => {
this.setState({
isPressed: !this.state.isPressed
});
};
render() {
let array = [0, 1, 2];
return (
<View style={styles.container}>
<Text>Test</Text>
{array.map(item => {
return (
<TouchableOpacity
key={item}
style={this.state.isPressed ? styles.buttonPressed : styles.button}
onPress={this.handlePress}
>
<Text>Click on it</Text>
</TouchableOpacity>
);
})}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
marginTop: 50
},
button: {
backgroundColor: 'grey'
},
buttonPressed: {
backgroundColor: 'black'
}
});
This is what I tried but when I click on one TouchableOpacity the backgroundColor of all of them change.
I would like to target only one and reset the other in the same time

Answer 1

it's good working
[import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
export default class Playground extends Component {
state = {
isPressed: false
};
handlePress = () => {
this.setState({
isPressed: !this.state.isPressed
});
};
render() {
let array = \[0, 1, 2\];
return (
<View style={styles.container}>
<Text>Test</Text>
{array.map(item => {
return (
<TouchableOpacity
key={item}
style={this.state.isPressed === false ? styles.buttonPressed : styles.button}
onPress={this.handlePress}
>
<Text>Click on it</Text>
</TouchableOpacity>
);
})}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
marginTop: 50
},
button: {
backgroundColor: 'grey'
},
buttonPressed: {
backgroundColor: 'black'
}
});

Answer 2

Not sure if it's the best way to resolve the problem, but I find a potential solution using direct manipulation
I start by assigning a different reference to each TouchableOpacity and after I target that ref and use setNativeProps to change the style of the target
export default class Playground extends Component {
state = {
daySelected: null
}
handlePress = (day, i) => {
if (this.state.daySelected !== null) {
this.state.daySelected.setNativeProps({
backgroundColor: 'grey'
});
}
this.setState({
daySelected: day
});
day.setNativeProps({
backgroundColor: 'black'
});
};
render() {
let array = [0, 1, 2];
return (
<View style={styles.container}>
<Text>Test</Text>
{array.map(i => {
return (
<TouchableOpacity
key={i}
ref={thisItem => (this[`item-${i}`] = thisItem)}
style={styles.button}
onPress={() => this.handlePress(this[`item-${i}`], i)}
>
<Text>Click on it</Text>
</TouchableOpacity>
);
})}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
marginTop: 50
},
button: {
backgroundColor: 'grey'
}
});