title: Checkbox default checked state issue
body: <p>I am having the following code. There's some issue I'm facing right now with this thing in my project. I want to use the <strong>forEach()</strong> loop there inside <strong>getElements()</strong> instead of <strong>map()</strong> and also <strong>I want to simply show it default checked whenever after checking on a checkbox, going next and again returning back there.</strong></p>
  
  <p>Any help with this issue ??</p>
  
  <p>here's the => <strong><a href="https://stackblitz.com/edit/material-ui-checkbox-n3hdtz?embed=1&amp;file=index.js" rel="nofollow noreferrer">DEMO</a></strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import { render } from 'react-dom';
  import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
  import Checkbox from 'material-ui/Checkbox';
  
  class App extends Component {
     itemsPerPage = 4
     constructor(props) {
        super(props);
        var ids = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
        this.state = {
        ids: ids,
        idsChecked: ids.map(() =&gt; false),
        page: 0
     }
    }
    componentDidMount = () =&gt; {
    }
    handlePrevious = () =&gt; {
       this.setState({ page: this.state.page - 1 });
    }
    handleNext = () =&gt; {
       this.setState({ page: this.state.page + 1 });
    }
    handleCheck = (e) =&gt; {
      var id = Number(e.currentTarget.id);
      var idsChecked = this.state.idsChecked.map((bool, i) =&gt; i === id ? !bool : bool);
      this.setState({ idsChecked: idsChecked });
    }
    handleDetails = (e) =&gt; {
      var id = Number(e.currentTarget.getAttribute("rel"));
      console.log("even or odd is clicked! (button #id: " + id + ")");
    }
    getElements = () =&gt; {
      var first = this.state.page * this.itemsPerPage;
      var trs = this.state.ids.slice(first, first + this.itemsPerPage).map((element, i) =&gt; {
      let details = &lt;button rel={first + i} onClick={this.handleDetails}&gt; {element % 2 ? "odd" : "even"} &lt;/button&gt;;
       return (
        &lt;tr key={element}&gt;
           &lt;td&gt;&lt;Checkbox
                 checked={this.state.idsChecked[first + i]}
                 id={first + i}
                 onCheck={this.handleCheck}
           /&gt;&lt;/td&gt;
           &lt;td&gt;{element}&lt;/td&gt;
           &lt;td&gt;{details}&lt;/td&gt;
        &lt;/tr&gt;
      );
    });
    return trs;
  }
  render() {
     var hasPrevious = this.state.page &gt; 0;
     var hasNext = this.state.page &lt; Math.floor((this.state.ids.length - 1) / this.itemsPerPage);
     var tdStyle = {width: "80px"}
     return (
       &lt;div&gt;
         &lt;div&gt;
           &lt;table&gt;
              &lt;tbody&gt;
                &lt;tr&gt;
                  &lt;td style={tdStyle}&gt;{hasPrevious &amp;&amp; &lt;button onClick={this.handlePrevious} hidden={this.state.hasPrevious}&gt; Previous &lt;/button&gt;}&lt;/td&gt;
                  &lt;td style={tdStyle}&gt;{hasNext &amp;&amp; &lt;button onClick={this.handleNext} hidden={this.state.isNext}&gt; Next &lt;/button&gt;}&lt;/td&gt;
               &lt;/tr&gt;
             &lt;/tbody&gt;
           &lt;/table&gt;
         &lt;/div&gt;
         &lt;div&gt;
           &lt;table&gt;
             &lt;tbody&gt;
               {this.getElements()}
             &lt;/tbody&gt;
           &lt;/table&gt;
         &lt;/div&gt;
        &lt;/div&gt;
    );
   }
  }
  
  render(&lt;MuiThemeProvider&gt;&lt;App /&gt;&lt;/MuiThemeProvider&gt;, document.getElementById('root'));
  </code></pre>