0

I'm fairly new to React and experimenting with React. I am making a set of cubes that when a user clicks, alternate between colors.

To learn more about setState, I added an input so that when the user enters a color, the color of the cubes changes. The problem is the color of the cube changes, but when I click on the cube it goes back to the default one. I want the cubes to change the colors that are inputted by the user.

What have I tried? I tried changing pink in this.setState({color: 'pink'}) to setColor(), but it doesn't work. I looked around here, but couldn't find anything that would answer my question.

I've created the issue here.

class TicTacToe extends Component {

  state = {
    color: 'black',
    colors: 'white',
    count: 0
  }

  changeColor(c){
    this.setState({ count: this.state.count + 1 })
    if(this.state.count % 2 === 0){
      this.setState({color: 'pink'})
      this.setState({colors: 'grey'})
    } else if (this.state.count % 2 !== 0){
      this.setState({color: 'grey'})
      this.setState({colors: 'pink'})
    }
  }

  setColor(color){
    return this.setState({color: color})
  }

  setColors(color){
    this.setState({colors: color})
  }

  render(){
    return (
      <div className="main">
          <div className="inputFields">
              <span> Color One:
                <input value={this.state.color}
                       onChange={(e)=> this.setColor(e.target.value)} /> </span>
              <br /><br />

              <span> Color Two:
                <input value={this.state.colors}
                        onChange={(e)=> this.setColors(e.target.value)} /> </span>
          </div>
          <div onClick= {(c)=> this.changeColor()}>
            <div className='square' style={{backgroundColor: this.state.color}}></div>
            <div className='square' style={{backgroundColor: this.state.colors}}></div>
            <div className='square' style={{backgroundColor: this.state.color}}></div>
            <br />
            <div className='square' style={{backgroundColor: this.state.colors}}></div>
            <div className='square' style={{backgroundColor: this.state.color}}></div>
            <div className='square' style={{backgroundColor: this.state.colors}}></div>
            <br />
            <div className='square' style={{backgroundColor: this.state.color}}></div>
            <div className='square' style={{backgroundColor: this.state.colors}}></div>
            <div className='square' style={{backgroundColor: this.state.color}}></div>
          </div>
            <span> This is the count: {this.state.count} </span>
      </div>
    )
  }
}

export default TicTacToe;
abidishajia
  • 222
  • 1
  • 6
  • 15
  • 1
    Not exactly sure what the cause of your problem was, but here's my solution: https://react-i8rer3.stackblitz.io. All the best ✌️ – Arman Charan Feb 24 '18 at 05:58
  • 1
    Not sure if this will solve the problem, but I would try passing a function as the first argument of separate. Take a look at https://medium.com/@baphemot/understanding-reactjs-setstate-a4640451865b – Yossi Feb 24 '18 at 05:59
  • Ahh wait the problem was the `changeColor()` `function`. The values were set `Strings` rather than `dynamic variables` based on `state`. – Arman Charan Feb 24 '18 at 06:00

1 Answers1

1

It goes back to the default onClick, because onClick you are manually setting the colors, Also you don't need a count variable to alternate between colors. The count state is also not used properly. All you need is to use functional setState and implement changeColor like

changeColor(c){
    this.setState(prevState => ({
      color: prevState.colors,
      colors: prevState.color
    }))
  }

Working Demo

Check When to use functional setState

Check setState doesn't update the state immediately

Shubham Khatri
  • 270,417
  • 55
  • 406
  • 400