Set state for element in array [react-native] - react-native

Question

I have a view
renderFrame = () => {
const frames = []
for(let i=1; i<=10; i++) {
frames.push (
<TouchableOpacity style={this.state.isActive ? styles.frameItemActive : styles.frameItem} key={i} onPress={this.handleChoiceTime.bind(this, i)}>
<Text style={{color: '#8E8E93', fontSize: 17}}>{i}</Text>
</TouchableOpacity>
)
}
return frames
}
how to set state for element in frame, default is false, when click then is true, double click then is false

Answer 1

Try the below code.
I have kept the frames outside the render method and used flatlist. Now When the button is pressed the isFrameActive flag of that particular frame element will change and re-render. So this should work as per your requirement. Give a try!
this.state = {
frames : [
{
id: 1,
value: 1,
isFrameActive: true
},
{
id: 2,
value: 2,
isFrameActive: true
},
{
id: 3,
value: 3,
isFrameActive: true
}
]
};
handleChoiceTime = (index, item) => {
this.state.frames[index].isActive = !this.state.frames[index].isActive;
this.setState({
frames: this.state.frames
})
}
renderFrame = (item) => {
<TouchableOpacity style={item.isFrameActive ? styles.frameItemActive : styles.frameItem} key={item.id} onPress={this.handleChoiceTime.bind(index, item)}>
<Text style={{color: '#8E8E93', fontSize: 17}}>{item.value}</Text>
</TouchableOpacity>
}
render() {
<Flatlist
data={this.state.frames}
renderItem = {(item) => this.renderFrame(index, item)}
extraData={this.state}
/>
};