Attempting to modify background by manipulating the state in Reactjs

Question

Attempting to modify background by manipulating the state in Reactjs

I'm currently working on an app that features various games. My goal is to allow users to click a button and have the game display on the screen, with the background color changing as well. I aim to utilize state to control the overall background of the entire app, not just the game component.

However, I'm encountering an issue where the state changes when the game is displayed, but the page does not update accordingly. Any suggestions?

Here's a glimpse of my current state setup:

state = {
  madLibsOut: false,
  ticTacOut: false,
  pigLatinOut: false,
  background: "green",
}

Below is an example of my attempt to make a change. Although the state updates successfully and the game is displayed, the background color fails to update:

handleClickTicTacToe = () => {
  const out = this.state.ticTacOut
  const newColor = 'red'
  this.setState({ ticTacOut: true, background: newColor })
}

For reference, here's how I am applying the style:

appStyle={
  backgroundColor: this.state.background,
  height: "100vh",
  width: "100%",
}

render() {
  return (
    <div className="App" style={this.appStyle}>

Any help or advice would be greatly appreciated. Thank you!

javascript css reactjs background styling

Answer 1

Answer №1

Your problem lies in the way you are setting your state as a class variable. This results in it being instantiated only once, with the value remaining unchanged.

If you are using ES6, it is recommended to follow a similar approach as suggested by @Allessandro Messori. However, it is not ideal to modify the object property and then set the state in his solution.

When setting the state, it is generally better to create a new object to update the state. In this scenario, your style object should be a new object.

state = {
  madLibsOut: false,
  ticTacOut: false,
  pigLatinOut: false,
  appStyle: {
    backgroundColor: "green",
    height: "100vh",
    width: "100%",
  } 
}

handleClickTicTacToe = () => {
  const out = this.state.ticTacOut
  // Use Object.assign(this.state.appStyle, { backgroundColor: 'red' }); if no ES6 enabled
  const newStyle = { ...this.state.appStyle, backgroundColor: 'red' }; 
  this.setState({ ticTacOut: true, appStyle: newStyle })
}

render() {
  return (
    <div className="App" style={this.state.appStyle}>

Alternatively, you can create a function that returns your style, ensuring it always updates based on your state. If you stick to your original code, you can update it as follows.

getAppStyle = () => {
  return {
    backgroundColor: this.state.background,
    height: "100vh",
    width: "100%",
  };
}

render() {
  const style = this.getAppStyle();
  return (
    <div className="App" style={style}>

Answer 2

Your problem lies in the way you are setting your state as a class variable. This results in it being instantiated only once, with the value remaining unchanged.

If you are using ES6, it is recommended to follow a similar approach as suggested by @Allessandro Messori. However, it is not ideal to modify the object property and then set the state in his solution.

When setting the state, it is generally better to create a new object to update the state. In this scenario, your style object should be a new object.

state = {
  madLibsOut: false,
  ticTacOut: false,
  pigLatinOut: false,
  appStyle: {
    backgroundColor: "green",
    height: "100vh",
    width: "100%",
  } 
}

handleClickTicTacToe = () => {
  const out = this.state.ticTacOut
  // Use Object.assign(this.state.appStyle, { backgroundColor: 'red' }); if no ES6 enabled
  const newStyle = { ...this.state.appStyle, backgroundColor: 'red' }; 
  this.setState({ ticTacOut: true, appStyle: newStyle })
}

render() {
  return (
    <div className="App" style={this.state.appStyle}>

Alternatively, you can create a function that returns your style, ensuring it always updates based on your state. If you stick to your original code, you can update it as follows.

getAppStyle = () => {
  return {
    backgroundColor: this.state.background,
    height: "100vh",
    width: "100%",
  };
}

render() {
  const style = this.getAppStyle();
  return (
    <div className="App" style={style}>

Answer 3

Answer №2

Transform appStyles into a dynamic function that generates a style object according to the current state.

appStyles = () => {
    return {
        color: this.state.textColor
    }
}

Answer 4

Transform appStyles into a dynamic function that generates a style object according to the current state.

appStyles = () => {
    return {
        color: this.state.textColor
    }
}

Answer 5

Answer №3

To better organize your code, consider moving all the properties of the appStyle object into your component's state.

You can achieve this by setting up your state like this:

  state = {
     madLibsOut: false,
     ticTacOut: false,
     pigLatinOut: false,
     appStyle:{
     backgroundColor: "green",
     height: "100vh",
     width: "100%",
    }
 }


  handleClickTicTacToe = () => {
    const out = this.state.ticTacOut
    let appStyle = this.state.appStyle
    appStyle.backgroundColor = 'red'
    this.setState({ticTacOut: true, appStyle:appStyle})
 }

  render() {
   return (
      <div className="App" style={this.state.appStyle}>

Answer 6

To better organize your code, consider moving all the properties of the appStyle object into your component's state.

You can achieve this by setting up your state like this:

  state = {
     madLibsOut: false,
     ticTacOut: false,
     pigLatinOut: false,
     appStyle:{
     backgroundColor: "green",
     height: "100vh",
     width: "100%",
    }
 }


  handleClickTicTacToe = () => {
    const out = this.state.ticTacOut
    let appStyle = this.state.appStyle
    appStyle.backgroundColor = 'red'
    this.setState({ticTacOut: true, appStyle:appStyle})
 }

  render() {
   return (
      <div className="App" style={this.state.appStyle}>

Attempting to modify background by manipulating the state in Reactjs

Answer №1

Answer №2

Answer №3

Similar questions

Tips on customizing the appearance of the "time" input type

What is the best way to stop a series of Ajax promises from continuing?

Is there a way to cancel hiding on a q-dialog?

Excessive messages are being sent to the child process from the nodejs/electron stream

Troubleshooting issue: Failure in proper functionality of Jquery's slideDown

Experiencing issues setting up npx to create a React app called my-app

Can you explain the definition of "mount" in the context of Express?

I am looking to display multiple divs sequentially on a webpage using JavaScript

Preventing list refresh over API following drag & drop using the elegant Drag and Drop library

React- Is it possible to update the state upon clicking a new page?

Passing references in React to parent components

Crystal-clear TextField component in Office UI Fabric

What is the reason for the presence of "e034" in CSS not resulting in the creation of a tick icon?

playing with JSON data in angular

Transferring information within React components

Maximizing memory efficiency in Javascript through array manipulation strategy

What is the best way to handle returning a promise when outside of the scope?

What is the best way to retrieve a {collection object} from a JavaScript map?

Implementing pagination in a table with the help of jQuery

Ways to split up array objects in an axios GET request