title: Limit number of checkboxes selected and save value
body: <p>I am building a food delivery application, and I would like to know how I can limit the number of checkboxes selected. An example is when entering the subsidiary, it displays a list of products. If I select a pizza, there is an extras section that limits the number of extras you can select, if you want to select more than two and your limit is two it should not allow you</p>
  <p>all this with react hooks, I attach a fragment of my component</p>
  <pre><code>const ExtrasSelector = ({options = [{}], onPress = () =&gt; {}, limit = 0}) =&gt; {
    const [showOptions, setShowOptions] = useState(true);
    const [selectedAmount, setSelectedAmount] = useState(0);
    const EXTRA = ' extra';
    const EXTRAS = ' extras';
  
    const updatedList = options.map(data =&gt; ({
      id: data.id,
      name: data.name,
      price: data.price,
      selected: false,
    }));
  
    const [itemsList, setItemsList] = useState(updatedList);
  
    const toggleOptions = () =&gt; setShowOptions(!showOptions);
  
    useEffect(() =&gt; {
  
    }, [selectedAmount]);
  
    // onPress for each check-box
    const onPressHandler = index =&gt; {
      setItemsList(state =&gt; {
        state[index].selected = !state[index].selected;
        onPress(state[index], getSelectedExtras(state));
  
        // Increments or decreases the amount of selected extras
        if (state[index].selected) {
          setSelectedAmount(prevState =&gt; prevState + 1);
        } else {
          setSelectedAmount(prevState =&gt; prevState - 1);
        }
    
        return state;
      });
    };
  
    const getSelectedExtras = extrasArr =&gt; {
      const selectedExsArr = [];
      extrasArr.map(item =&gt; {
        if (item.selected) {
          selectedExsArr.push(item);
        }
      });
  
      return selectedExsArr;
    };
  
    return (
      &lt;View&gt;
        &lt;View style={styles.container}&gt;
          &lt;TouchableOpacity style={styles.row} onPress={toggleOptions}&gt;
            &lt;Text style={styles.boldTitleSection}&gt;
              Extras {'\n'}
              &lt;Text style={titleSection}&gt;
                Selecciona hasta {limit}
                {limit &gt; 1 ? EXTRAS : EXTRA}
              &lt;/Text&gt;
            &lt;/Text&gt;
            &lt;View style={styles.contentAngle}&gt;
              &lt;View style={styles.contentWrapperAngle}&gt;
                &lt;Icon
                  style={styles.angle}
                  name={showOptions ? 'angle-up' : 'angle-down'}
                /&gt;
              &lt;/View&gt;
            &lt;/View&gt;
          &lt;/TouchableOpacity&gt;
  
          {showOptions ? (
            itemsList.map((item, index) =&gt; (
              &lt;View key={index}&gt;
                &lt;CheckBox
                  label={item.name}
                  price={item.price}
                  selected={item.selected}
                  otherAction={item.otherAction}
                  onPress={() =&gt; {
                    onPressHandler(index, item);
                  }}
                /&gt;
                &lt;View style={styles.breakRule} /&gt;
              &lt;/View&gt;
            ))
          ) : (
            &lt;View style={styles.breakRule} /&gt;
          )}
        &lt;/View&gt;
      &lt;/View&gt;
    );
  };
  </code></pre>