How can I change styles of an array element in react native - react-native

Question

I leave a small code of sample of as I have my code, in fact my code I show it inside a FlatList... but here I leave him something similar in .map that is practically the same thing, they are dynamic Views, I wish that on having clicked in the button, that View change Styles (Position Abosulte, Width, Backgorund color and more)
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';
import AssetExample from './components/AssetExample';
let shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles'];
export default function App() {
return (
<View style={styles.container}>
{shopping.map((data, idx) => {
return (
<View
style={{
width: '100%',
height: 70,
backgroundColor: '#f7f7f7',
marginTop: 5,
marginBottom: 5,
borderColor: '#dfdfdf',
borderWidth: 1,
alignItems: 'center',
}}>
<Text>Tex: {data}</Text>
//I press this buttom, i want change this View Styles!!!, only this view
<TouchableOpacity onPress={() => {}}>
<View
style={{
width: '100%',
height: 30,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f7f7f7',
marginTop: 5,
marginBottom: 5,
borderColor: '#dfdfdf',
borderWidth: 1,
borderRadius: 15,
}}>
<Text style={{ width: '100%' }}>Change</Text>
</View>
</TouchableOpacity>
</View>
);
})}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
});

Answer 1

You can have a state variable and then set it to change the style.
<TouchableOpacity onPress={() => this.setState({changeStyleIndex:index})}>
<View
style={this.state.changeStyleIndex != index{
width: '100%',
height: 30,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f7f7f7',
marginTop: 5,
marginBottom: 5,
borderColor: '#dfdfdf',
borderWidth: 1,
borderRadius: 15,
}:{change style goes here}}>
<Text style={{ width: '100%' }}>Change</Text>
</View>
</TouchableOpacity>

Answer 2

import React from 'react'
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';
let shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles'];
export default class App extends React.Component {
constructor(props) {
super(props)
this.state = {
BackColor = '#f7f7f7',
StateWidth: '100%'
}
}
HandleChange = () => {
this.setState({
BackColor: 'red',
StateWidth: '50%'
})
}
render() {
const { BackColor, StateWidth } = this.state
return (
<View style={styles.container}>
{shopping.map((data, idx) => {
return (
<View
style={{
width: { StateWidth },
height: 70,
backgroundColor: { BackColor },
marginTop: 5,
marginBottom: 5,
borderColor: '#dfdfdf',
borderWidth: 1,
alignItems: 'center',
}}>
<Text>Tex: {data}</Text>
//I press this buttom, i want change this View Styles!!!, only this view
<TouchableOpacity onPress={() => { this.HandleChange }}>
<View
style={{
width: '100%',
height: 30,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f7f7f7',
marginTop: 5,
marginBottom: 5,
borderColor: '#dfdfdf',
borderWidth: 1,
borderRadius: 15,
}}>
<Text style={{ width: '100%' }}>Change</Text>
</View>
</TouchableOpacity>
</View>
);
})}
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
I used the component by class, but change it to function and it will give crt, the logic is basically this.