push button key value to array - arrays

Question

I have a TouchableOpacity with key="red" and another one with key="black" and everytime a button is pushed the value should be added to the array. I've searched the internet for about one hour to find a way of doing this and I can't find nothing
import React from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
var RedBlackArray = [ "Red", "Black", "Red"];
export default class App extends React.Component {
constructor() {
super();
this.state = {
countRed: 0,
countBlack: 0
};
}
handlePressRed = () => {
this.setState(prevState => ({ countRed: prevState.countRed + 1 }));
}
handlePressBlack = () => {
this.setState(prevState => ({ countBlack: prevState.countBlack + 1 }));
}
render() {
return (
<View>
<View style={styles.container}>
<View style={styles.col1}>
<Text>red: {this.state.countRed}</Text>
<TouchableOpacity key='red' onPress={this.handlePressRed}>
<Text style={styles.button}>red!</Text>
</TouchableOpacity>
</View>
<View style={styles.col2}>
<Text>black: {this.state.countBlack}</Text>
<TouchableOpacity key='black' onPress={this.handlePressBlack}>
<Text style={styles.button.buton2}>black!</Text>
</TouchableOpacity>
</View>
</View>
<View style={{marginTop: 30, paddingLeft: 20, paddingRight:20}}>
<Text>So far the order has been:</Text>
{RedBlackArray.map((item, key)=> (
<Text key={key}>{item}</Text>
))}
</View>
</View>
);
}
}
const styles = StyleSheet.create({
button: {
marginTop: 50,
backgroundColor: 'red',
borderColor: 'white',
borderWidth: 1,
borderRadius: 12,
color: 'white',
fontSize: 20,
fontWeight: 'bold',
overflow: 'hidden',
padding: 12,
textAlign:'center',
buton2: {
marginTop: 50,
backgroundColor: 'black',
borderColor: 'white',
borderWidth: 1,
borderRadius: 12,
color: 'white',
fontSize: 20,
fontWeight: 'bold',
overflow: 'hidden',
padding: 12,
textAlign:'center'
}
},
container: {
flexDirection: 'row',
justifyContent: 'center'
},
col1: {
paddingTop: 50,
paddingRight: 30,
justifyContent: 'center'
},
col2: {
paddingTop: 50,
paddingLeft: 30,
justifyContent: 'center'
}
});
The result would be that when Red or Black buttons are pushed, the key should be added to the array so it would be displayed in the lower part of the code but I can't find the way of doing it. Here is the full code. Also, any other advice about what I'm doing wrong is welcomed. I've just started learning React. Thank you all!

Answer 1

You should read basic documentation of react-native the key prop in TouchableOpacity is work as id not for key value like array. Try following code
class Foo extends React.Component {
constructor(props) {
super(props);
this.state = {
red: 0,
black: 0,
};
}
onClick = (name) => {
let selected = this.state[name];
selected++;
this.setState({ [name]: selected });
};
renderButton = (name) => {
return (
<TouchableOpacity onPress={this.onClick.bind(this, name)}>
<Text>{name}</Text>
</TouchableOpacity>
);
};
render() {
const { red, black } = this.state;
return (
<View>
{this.renderButton('red')}
{this.renderButton('black')}
{red.map(() => (
<Text>red</Text>
))}
{black.map(() => (
<Text>black</Text>
))}
</View>
);
}
}

Answer 2

Maybe you could try to pass the desired value to the function called onPress to add it to the desired array.
handlePressBlack(passedValue) {
this.setState(prevState => ({ countBlack: prevState.countBlack + 1 });
this.setState(RedBlackArray: this.RedBlackArray.concat(passedValue));
}
<TouchableOpacity key='black' onPress={() => this.handlePressBlack('Black')}>
<Text style={styles.button.buton2}>black!</Text>
</TouchableOpacity>