title: Disable Checkbox in React, Formik when its value from Server is returned false
body: <p>I have a checkbox table that needs to be rendered based on a schema from the API:</p>
  
  <p>The schema is the following:</p>
  
  <pre><code>  {
      "type": "item1",
      "name": "item1",
      "read": true,
      "write": true
    }
  </code></pre>
  
  <p>I have a checkbox component that holds the logic. See below:</p>
  
  <pre><code>import PropTypes from 'prop-types';
  import React from 'react';
  
  import { siblingFieldName } from './utils';
  
  const PermissionsCheckbox = ({
    field: { name, value, onBlur },
    form: { setFieldValue },
    disable = false
  }) =&gt; (
    &lt;div&gt;
      &lt;input
        name={name}
        type="checkbox"
        value={value}
        checked={value}
        onChange={() =&gt; {
          if (name.includes('.write') &amp;&amp; value === true) {
            setFieldValue(siblingFieldName(name, 'write'), false);
          }
  
          if (name.includes('.read') &amp;&amp; value === false) {
            setFieldValue(siblingFieldName(name, 'read'), true);
          }
          setFieldValue(name, !value);
        }}
        onBlur={onBlur}
        disable={disable}
      /&gt;
    &lt;/div&gt;
  );
  
  PermissionsCheckbox.propTypes = {
    field: PropTypes.object,
    form: PropTypes.object,
    disable: PropTypes.bool
  };
  
  export default PermissionsCheckbox;
  </code></pre>
  
  <p>In the main component, that renders the table I have the following logic. That displays the table and its respective checkboxes based on props:</p>
  
  <pre><code>  renderField = (field, index) =&gt; {
      const { keyField } = this.props;
      const { type, name, viewable, writable } = field;
      return (
        &lt;div className="row" key={type}&gt;
          &lt;div className="col-4 my-1"&gt;{name}&lt;/div&gt;
          {viewable &amp;&amp; (
            &lt;div className="col-2 my-1 text-center"&gt;
              &lt;Field component={PermissionsCheckbox} name={`${keyField}.${index}.read`} /&gt;
            &lt;/div&gt;
          )}
          {writable &amp;&amp; (
            &lt;div className="col-2 my-1 text-center"&gt;
              &lt;Field component={PermissionsCheckbox} name={`${keyField}.${index}.write`} /&gt;
            &lt;/div&gt;
          )}
        &lt;/div&gt;
      );
    };
  </code></pre>
  
  <p>I want the last checkbox which gets the value <code>write: false</code> from the API, to appear and be disabled.</p>
  
  <p>The response from the server would be the following:</p>
  
  <pre><code>  {
      "type": "item5",
      "name": "item5",
      "read": true,
      "write": false
    }
  </code></pre>
  
  <p>Currently the logic says don't disable the write checkbox if <code>write: false</code>. I want it to show up but be disabled. I am using Formik for the forms.</p>
  
  <p>I tried doing the following:</p>
  
  <pre><code>  renderField = (field, index) =&gt; {
      const { keyField } = this.props;
      const { type, name, readable, writable, disabled } = field;
      return (
        &lt;div className="row" key={type}&gt;
          &lt;div className="col-4 my-1"&gt;{name}&lt;/div&gt;
          {readable &amp;&amp; (
            &lt;div className="col-2 my-1 text-center"&gt;
              &lt;Field component={PermissionsCheckbox} name={`${keyField}.${index}.read`} /&gt;
            &lt;/div&gt;
          )}
          {writable ? (
            &lt;div className="col-2 my-1 text-center"&gt;
              &lt;Field component={PermissionsCheckbox} name={`${keyField}.${index}.write`} /&gt;
            &lt;/div&gt;
          ) : (
            &lt;div className="col-2 my-1 text-center"&gt;
              &lt;Field
                component={PermissionsCheckbox}
                name={`${keyField}.${index}.write`}
                disabled={!disabled}
              /&gt;
            &lt;/div&gt;
          )}
        &lt;/div&gt;
      );
    };
  </code></pre>
  
  <p>But it doesn't work. It eithers shows all the checkboxes clickable or disabled based on the value of disabled. What am I doing wrong here?? Or is my logic wrong?</p>