When a user clicks on the TouchableOpacity element, I want to change the color of the button from the default gray to blue. Initially, the 'checked={this.state.newProjects}' newProjects variable is not present in the state, so when clicked it should create a new variable and set the 'checked' prop to true, causing the color change. The goal is to toggle the button color with each press. The code below is an attempt to achieve this, based on a similar example in React Native: https://codesandbox.io/s/k3lzwo27z5.
Code:
constructor(props) {
super(props);
this.state = {
};
}
handleClick = e => {
this.setState({
[e.target.name]: !this.state[e.target.name]
});
};
<TouchableOpacity onPress={this.handleClick('newProjects')}>
<Filterbutton name="New Projects" checked={this.state.newProjects}/>
</TouchableOpacity>
Filterbuttonjs:
const Filterbutton = ({name, checked}) => (
<View style={checked ? styles.buttonTab : styles.defaultButtonTab}>
<Text style={styles.buttonContent}>{name}</Text>
</View>
)
export default Filterbutton;
const styles = StyleSheet.create({
defaultButtonTab: {
justifyContent: 'center',
alignItems: 'center',
maxWidth: 150,
height: 30,
padding: 10,
borderRadius: 13,
borderStyle: "solid",
borderWidth: 1.3,
borderColor: "rgba(131, 143, 158, 0.7)",
marginRight: 10,
marginTop: 10
},
buttonTab: {
justifyContent: 'center',
alignItems: 'center',
maxWidth: 150,
height: 30,
padding: 10,
borderRadius: 13,
borderStyle: "solid",
borderWidth: 1.3,
borderColor: "#1994fc",
marginRight: 10,
marginTop: 10
},
Screenshot: