Adding minimum alongside maximum for Checkbox selection limit function in ReactJS

Question

I have a react app which maps JSON values into checkboxes, and the JSON includes a min/max required value, I have made a function which sets the maximum value to the checkboxes from the JSON and it works fine, but whenever I try to add the minimum to the same functions it doesn't work I tried things like (this.props.min < this.state.currentData < this.props.max ) but it didn't work

Checkboxes.js Max function

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

....

Full code: https://codesandbox.io/embed/wklrxy5x15?fontsize=14

score 0 · Accepted Answer · answered Mar 14 '19 at 07:05

0

You add 2 problems in your code:

You forgot to pass the min props to your Checkbox component (from ItemList)
The condition when you uncheck wasn't totally correct

See a working example here: https://codesandbox.io/s/mjp92vkj9x

answered Mar 14 '19 at 07:05

soywod

4,377
3
26
47

Adding minimum alongside maximum for Checkbox selection limit function in ReactJS

1 Answers1