title: react bootstrap checkbox issue
body: <p>Using react-bootstrap, I want a checkbox on my form to be checked when my 'inactive' value is true; and not when it's false. So I set the checked attribute to this pretty straightforward line:</p>
  <pre><code>checked={inactive}
  </code></pre>
  <p>But I get this error when I click the checkbox: <em>&quot;Warning: Received the string <code>false</code> for the boolean attribute <code>checked</code>. The browser will interpret it as a truthy value. Did you mean checked={false}?&quot;</em></p>
  <p>Here's the relevant code:</p>
  <pre><code>render() {
    const {
      inactive,
      ...
    } = this.state;
  
    return (
      &lt;Form.Group as={Row}&gt;
        &lt;Form.Label&gt;Inactive&lt;Form.Label&gt;
        &lt;Col&gt;
          &lt;Form.Check
            type=&quot;checkbox&quot;
            checked={this.state.inactive}
            onChange={() =&gt; {
              if (inactive === 'false') {
                this.setState({ inactive: 'true' });
              } else {
                this.setState({ inactive: 'false' });
              }
            }}
          /&gt;
        &lt;/Col&gt;
      &lt;/Form.Group&gt;
      );
    } 
  }
  </code></pre>
  <p>So then I changed the checked attribute to the following. But in this case, the the value does not get set correctly when false:</p>
  <pre><code>...
        checked={inactive === 'true'}
  ...
  </code></pre>