title: React.js - Value of checkbox not reflecting initial state
body: <p>I'm rendering checkboxes with the following code:</p>
  
  <pre><code>export default class Day extends React.Component {
      constructor(props){
          super(props)
          this.state = {
              startTime: this.props.startTime,
              endTime: this.props.endTime,
              available: this.props.available
          }
          console.log(this.state.available)
      }
  
      return (
          &lt;div className='day'&gt;
              &lt;label className='name'&gt;
                  {day.name}
                  &lt;input
                      type='checkbox'
                      checked={this.state.available}
                      onChange={this.handleAvailableChange}
                      /&gt;
              &lt;/label&gt;
              {this.state.available}
  
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>This <code>Day</code> component is rendered from a parent component like so:</p>
  
  <pre><code>export default class Schedule extends React.Component {
  
      render () {
          const dayComponents = this.props.days.map( (day) =&gt;
              &lt;Day key={day.id}
                  startTime={this.state[day.name].start}
                  endTime={this.state[day.name].end}
                  available={this.state[day.name].available}
                  day={day}
                  handleDayChange={(day, startOrEnd, time, available) =&gt; this.handleDayChange(day, startOrEnd, time, available) }
              /&gt;
  
          return (
              &lt;div&gt;
                  {dayComponents}
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>... where <code>this.props.days</code> is an array of day objects that look like so:</p>
  
  <pre><code>#&lt;Day id: 14, name: "Saturday"&gt;
  </code></pre>
  
  <p>And a state that looks like so:</p>
  
  <pre><code>{"Sunday": {"start": 0, "end": 0, "available": true},
  "Monday": {"start": 0, "end": 0, "available": true},
  etc...}
  </code></pre>
  
  <p>The value of my checkbox should be initialized based on the value of <code>this.state.available</code>, but every checkbox is checked when the component is rendered.</p>
  
  <p>I'm looking at the value of <code>this.state.available</code> in two different places, and in both places, I get 5 trues and 2 falses.</p>
  
  <p>Is there some aspect of the component life cycle that I'm missing here? Do I need to utilize something like <code>getInitialState()</code> (didn't change anything when I tried)?</p>
  
  <p>Hoping this is something simple and stupid I overlooked since it seems like such basic functionality...</p>
  
  <p><strong><em>Edit:</em></strong></p>
  
  <p>I've removed state from the <code>Day</code> component and rendering the checkboxes as follows:</p>
  
  <pre><code>&lt;label className='name'&gt;
      {day.name}
      &lt;input
          type='checkbox'
          checked={this.props.available}
          onChange={this.handleAvailableChange}
          /&gt;
  &lt;/label&gt;
  {this.props.available}
  </code></pre>
  
  <p>However, this is still the output I get:</p>
  
  <p><a href="https://i.stack.imgur.com/NaPS9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NaPS9.png" alt="Screen cap"></a></p>
  
  <p>It is also worth noting that if I assign a static <code>false</code> to the value of <code>checked</code>, an unchecked checkbox is returned.</p>
  
  <p><strong><em>Edit 2 (Solution):</em></strong></p>
  
  <p>Turns out that when I was saving the schedule to my database (which is where I pull the <code>available</code> values from), I was saving the booleans to strings because the parameters in the AJAX request were getting automatically cast to a different data type.</p>
  
  <p>So I was trying to set the value of <code>checked</code> to <code>"false"</code>, which always returns true since it's an existent string.</p>