title: React & Bootstrap: How to make input box in a PureComponent Card update other instances of itself?
body: <p>I have a list of Cards. Each Card is set up as a PureComponent. Each Card has an input box with a boolean. I'd like to make the user choose up to 3 cards. Once that max is hit, the rest of the input boxes should become disabled. My code currently has a reducer with two actions: makeProductDisabled and makeProductEnabled. It's updating one item at a time to be disabled, but it needs to be changed so that the rest of the non-checked items are disabled.</p>
  
  <p>Reducer:
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export const productListReducer = (state, action) =&gt; {
      let position;
      switch (action.type) {
          case "makeProductDisabled":
              position = state.productList.map((e) =&gt; e.id).indexOf(action.value.id);
              return { ...state, ...state.productList[position].isProductDisabled = true };
          case "makeProductEnabled":
              position = state.productList.map((e) =&gt; e.id).indexOf(action.value.id);
              return { ...state, ...state.productList[position].isProductDisabled = false };
  
          default:
              return state; 
      }
  };
  
  export default productListReducer;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Card as a PureComponent: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, {PureComponent} from 'react';
  import PropTypes from 'prop-types';
  import Card from '../ui/card';
  import Row from '../ui/custom/row';
  import Col from '../ui/custom/col';
  import CardBody from '../ui/card-body';
  import Input from '../ui/custom/input';
  import Label from '../ui/custom/label';
  import FormCheck from '../ui/form-check';
  
  class MyCard extends PureComponent {
  
      onToggleProductToCompare = (event) =&gt; {
          this.setIsProductDisabled(event);
      };
  
      setIsProductDisabled = (event) =&gt; {
          if (this.props.productCompareList.length &gt; 3) {
              // TODO: find any products, that are not checked, to be disabled
              this.props.dispatch({type: "makeProductDisabled", value: this.props.product})
          } else {
              this.props.dispatch({ type: "makeProductEnabled", value: this.props.product})
          }
      }
  
      render() {
          const { product } = this.props;
          return (
              &lt;Card&gt;
                  &lt;CardBody&gt;
                      &lt;Row&gt;
                          &lt;Col md={5} lg={3}&gt;
                              &lt;FormCheck right&gt;
                                  &lt;Label htmlFor={`compareProducts--${this.props.product.id}`} className='form-check-label'&gt;Compare&lt;/Label&gt;
  
                                  &lt;Input
                                      id={`compareProducts--${this.props.product.id}`}
                                      type="checkbox"
                                      
                                      // TODO: if length &gt; 3, make the rest disabled.
                                      // else make all enabled
                                      disabled={this.props.product.isProductDisabled}
                                      checked={false}
  
                                      changed={this.onToggleProductToCompare}
                                  /&gt;
                              &lt;/FormCheck&gt;
                          &lt;/Col&gt;
                          
                      &lt;/Row&gt;
                  &lt;/CardBody&gt;
              &lt;/Card&gt;
          )
      }
  }
  
  MyCard.propTypes = {
      product: PropTypes.object,
      dispatch: PropTypes.func
  };
  
  export default MyCard;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>