Changing backgroundColor depending on the state value - expo

Question

I am learning how to use React components on React Native and I am now starting the Handling Events. I created a handler that turns a text component to ON or OFF whenever the user presses the button. I managed to change the color of the button whenever the boolean value of the state changes but I haven't managed to do it with the backgroundColorof the screen. I tried to create a function {color} to render the color depending on the isToggleOn but my attempt was unsuccessful.
I think I have to pass a props to it but I don't know how to apply it in this case. Could you give me a hand?
import React from 'react';
import { View, Text, Button } from 'react-native';
import { render } from 'react-dom';
export default class HomeScreen extends React.Component {
constructor(props) {
super(props);
this.state = { isToggleOn: true };
// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState((state) => ({
isToggleOn: !state.isToggleOn,
}));
}
render() {
//I tried to render the `color` by creating a function
const { color } = this.state.isToggleOn ? 'red' : 'blue';
return (
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: color,
}}>
<Text>{this.state.isToggleOn ? 'ON' : 'OFF'}</Text>
<Button
color={this.state.isToggleOn ? 'red' : 'blue'}
title={this.state.isToggleOn ? 'TURN OFF' : 'TURN ON'}
onPress={this.handleClick}
/>
</View>
);
}
}

Answer 1

import React from 'react';
import {View, Text, Button} from 'react-native';
import { render } from 'react-dom';
export default class HomeScreen extends React.Component{
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(state => ({
// missing this here
isToggleOn: !this.state.isToggleOn
}));
}
render() {
// use variable
const color = this.state.isToggleOn ? 'red' : 'blue';
return(
<View
style={{
flex:1,
alignItems:'center',
justifyContent:'center',
backgroundColor:color}}>
<Text>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</Text>
<Button color={this.state.isToggleOn ? 'red' : 'blue'} title={this.state.isToggleOn ? 'TURN OFF' : 'TURN ON'} onPress={this.handleClick}/>
</View>
)
}
}

Answer 2

Ciao, you could use a conditional style on View component like this:
<View style={this.state.isToggleOn ? styles.bg_red : styles.bg_blue}>
Then in your styles:
...
bg_blue: {
flex: 1,
alignItems: "center",
justifyContent: "center",
backgroundColor: "blue"
},
bg_red: {
flex: 1,
alignItems: "center",
justifyContent: "center",
backgroundColor: "red"
}
...
Here your code modified.