1

So, I have 100 mapped buttons from array, something like that

        {
          buttons.map((button, index) =>
            <StyledGameButton
              key={index}
              value={button}
              onClick={this.checkButton}>
              { button < 10 ? `0${button}` : button }
            </StyledGameButton>
          )
        }

I want user to click all the buttons from 0 to 99, so when he click for example 0 the button should change color. I made function checking if he clicked correct button, and if yes then I am addind data-attr to that button (thats how I am changing the color of buttons):

  checkButton = e => {
    const buttonId = e.currentTarget.getAttribute('value');
    const nextButton = this.state.currentButton === null ? 0 : this.state.currentButton + 1;
    if (buttonId == nextButton){
      this.setState({
        currentButton: parseInt(buttonId),
      });
      if (this.state.currentButton === 99) {
        this.gameEnd();
      };
      e.currentTarget.setAttribute('data-status', 'correct');
    }
  }

The problem is that I want to make reset button, that will change all buttons to 'unclicked' so I have to delete data-attr from all buttons on one click. How can I do this? Or is there a better solution to manage 'state' of single button without making 100 states?

Greg
  • 56
  • 7
  • Possible duplicate if [this post](https://stackoverflow.com/questions/45420503/how-to-handle-state-of-multiple-buttons-with-react) – Jamie_D Apr 04 '20 at 11:41
  • Did that post solve your problem? Kindly give some feedback would be appreciated. See [What should I do when someone answers my question?](https://stackoverflow.com/help/someone-answers) – keikai Apr 06 '20 at 06:30

1 Answers1

2

100 checkboxes demo

use an Array to store the state would be fine.

const list = [...Array(100).keys()].map(x => ({ id: x }));
const App = () => {
  const [selected, setSelected] = React.useState([]); // init with empty list
  const onChangeHandler = id => () => {               // pass index/identify params
    selected.includes(id)                             // check whether been checked
      ? setSelected(selected.filter(x => x !== id))   // yes, remove
      : setSelected([...selected, id]);               // no, add
  };
  const onRemove = () => {
    setSelected([]);                                  // remove all, set to empty list
  };
  return (
    <div className="App">
      {list.map(item => (
        <input
          type="checkbox"
          key={item.id}
          checked={selected.includes(item.id)}
          onChange={onChangeHandler(item.id)}
        />
      ))}
      <br />
      <button onClick={onRemove}>Remove all</button>
      <div>{selected.join(",")}</div>
    </div>
  );
}
ReactDOM.render(<App />, document.getElementById("root"));
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>
keikai
  • 14,085
  • 9
  • 49
  • 68