Changing backgroundColor depending on the state value

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>
        )
    }
}