React - toggle color for adjacent elements

Question

I'm creating a gameBoard, and having trouble toggling background colors for button divs. The toggle works for individual clicks on the "buttons" (styled divs), but when I click adjacent buttons it requires two clicks to get the next button to change its background color. How can I get adjacent buttons to toggle on first click? I've read some related posts like (Changing style of a button on click) but still struggling to get this working -

Related code below, full code: https://jsfiddle.net/lydiademi/kt2qgfpr/

TY!

class App extends React.Component {

  constructor(props) {
  super(props)

  this.state = {
    color: '#FFF',
    color_white: true,
    currentWord: '',
    board1: [],
    row1: ["aaafrs","aaeeee","aafirs","adennn","aeeeem"],
  }

  this.clicked = this.clicked.bind(this);
}

componentWillMount() {
  let letter1 = '';

  this.state.row1.forEach(die => {
    letter1 = die[Math.floor(Math.random() * 6)].toUpperCase();
    if (letter1 === 'Q') {
      this.state.board1.push("Qu")
    } else {
      this.state.board1.push(letter1);
    }
  })
}

clicked(event) {
  //change background color
  let newColor= this.state.color === "#FFF" ? "#ACCEEC" : "#FFF";
  this.setState({ color: newColor });
  event.target.style.backgroundColor = newColor;
}

render () {
  return ( 
   <div id="board">
      <div className="row">
        {

          this.state.board1.map((letter, index) => {
          return (
            <div className="btn" onClick={(e) => {this.clicked(e)}}> 
              {letter}
            </div>
          )
        })}
      </div>
  ) 
}

It's more of a javascript issue, so I have edited the tags. I guess the issue is in this code `var newColor= this.state.color === "#FFF" ? "#ACCEEC" : "#FFF"; this.setState({ color: newColor }); event.target.style.backgroundColor = newColor;` — Dhaval Jardosh, Nov 13 '17 at 04:00
The issue is in the state and update. Notice, that all buttons do not "switch" as expected after initial state. As described, "...it requires two clicks." — , Nov 13 '17 at 04:12

score 2 · Accepted Answer · answered Nov 13 '17 at 04:15

Issue is :

You are maintaining one variable for all the elements bg toggle, So the code is working as it should,

There is no need for maintaining state for that.

What you can do is :

Set extra attribute data-color like this

<div className="btn" data-color='#FFF' onClick={(e) => {this.clicked(e)}}>

And change bg color and attr based upon data-color , onClick like this

clicked(event) {

    // get current color of element
    let currentColor = event.target.attributes['data-color'].value;

    // apply condition based upon currentColor
    let newColor = currentColor === "#FFF" ? "#ACCEEC" : "#FFF";

    // set the bg color 
    event.target.style.backgroundColor = newColor;

    // change the data-color value to currentColor
    event.target.setAttribute('data-color' , newColor);

    // add letter to state.currentWord
    let letter = event.target.innerText;
    this.setState({ currentWord: this.state.currentWord + letter })
}

Here is the link to working fiddle :

https://jsfiddle.net/vivekdoshi2/kt2qgfpr/2/

^thank you for clear explanation, would you know how to select elements within the render so that I could clear board (ie data-color: "#FFF" for all divs with data-color attr) upon clicking submit (in submitWord method) I wanted to use .setAttribute property, I tried using something like document.body.querySelector(''div .btn") thank you — Lyddem, Nov 13 '17 at 06:15
@Lyddem, will you please accept and upvote the answer , as it sovles your current issue ? for setting all to white again you can use querySelector on class name and loop thrugh each element and set data-color to white, — Vivek Doshi, Nov 13 '17 at 06:21

React - toggle color for adjacent elements

1 Answers1