score:0

Accepted answer

No needs to know which element is checked or not in global,

First change currentData to 0 in this.state

constructor(props) {
    super(props);
    this.state = {
      currentData: 0,
      limit: 2
    };
  }

Then change selectData function

selectData(id, event) {
    let isSelected = event.currentTarget.checked;
    if (isSelected) {
      if (this.state.currentData < this.state.limit) {
        this.setState({ currentData: this.state.currentData+1 });
      }else{
        event.preventDefault()
        event.currentTarget.checked = false;
      }
    } else {
      this.setState({currentData: this.state.currentData - 1});
    }
  }

And remove checked attribute from input (when page load is 0) ´

<div className="inputGroup">
   <input
       id={id + item.name}
       name="checkbox"
       type="checkbox"
       onChange={this.selectData.bind(this, id + item.name)}
   />
<label htmlFor={id + item.name}>{item.name} </label>
</div>

https://codesandbox.io/s/j4yyx9v6l5?fontsize=14


Related Query

More Query from same tag