Checkbox default checked state issue

Question

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 forEach() loop there inside getElements() instead of map() and also I want to simply show it default checked whenever after checking on a checkbox, going next and again returning back there.

Any help with this issue ??

here's the => DEMO

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(() => false),
      page: 0
   }
  }
  componentDidMount = () => {
  }
  handlePrevious = () => {
     this.setState({ page: this.state.page - 1 });
  }
  handleNext = () => {
     this.setState({ page: this.state.page + 1 });
  }
  handleCheck = (e) => {
    var id = Number(e.currentTarget.id);
    var idsChecked = this.state.idsChecked.map((bool, i) => i === id ? !bool : bool);
    this.setState({ idsChecked: idsChecked });
  }
  handleDetails = (e) => {
    var id = Number(e.currentTarget.getAttribute("rel"));
    console.log("even or odd is clicked! (button #id: " + id + ")");
  }
  getElements = () => {
    var first = this.state.page * this.itemsPerPage;
    var trs = this.state.ids.slice(first, first + this.itemsPerPage).map((element, i) => {
    let details = <button rel={first + i} onClick={this.handleDetails}> {element % 2 ? "odd" : "even"} </button>;
     return (
      <tr key={element}>
         <td><Checkbox
               checked={this.state.idsChecked[first + i]}
               id={first + i}
               onCheck={this.handleCheck}
         /></td>
         <td>{element}</td>
         <td>{details}</td>
      </tr>
    );
  });
  return trs;
}
render() {
   var hasPrevious = this.state.page > 0;
   var hasNext = this.state.page < Math.floor((this.state.ids.length - 1) / this.itemsPerPage);
   var tdStyle = {width: "80px"}
   return (
     <div>
       <div>
         <table>
            <tbody>
              <tr>
                <td style={tdStyle}>{hasPrevious && <button onClick={this.handlePrevious} hidden={this.state.hasPrevious}> Previous </button>}</td>
                <td style={tdStyle}>{hasNext && <button onClick={this.handleNext} hidden={this.state.isNext}> Next </button>}</td>
             </tr>
           </tbody>
         </table>
       </div>
       <div>
         <table>
           <tbody>
             {this.getElements()}
           </tbody>
         </table>
       </div>
      </div>
  );
 }
}

render(<MuiThemeProvider><App /></MuiThemeProvider>, document.getElementById('root'));

Answer 1

1. To replace, map with forEach, push the checkbox elements onto an array, and return that array from your getElements().
2. Use the defaultChecked props of the <Checkbox> component to set the default value to true.

Full code:

  getElements = () => {
    var first = this.state.page * this.itemsPerPage;
    let checkboxArray = [];   // array for storing the elements
    this.state.ids.slice(first, first + this.itemsPerPage).forEach((element, i) => {
      let details = <button rel={first + i} onClick={this.handleDetails}> {element % 2 ? "odd" : "even"} </button>;
      checkboxArray.push(
        <tr key={element}>
          <td><Checkbox
            checked={this.state.idsChecked[first + i]}
            id={first + i}
            defaultChecked={true/*use the defaultChecked prop*/}
            onCheck={this.handleCheck}
          /></td>
          <td>{element}</td>
          <td>{details}</td>
        </tr>
      );
    });
    return checkboxArray;   // return the array
  }
  render() {
    var hasPrevious = this.state.page > 0;
    var hasNext = this.state.page < Math.floor((this.state.ids.length - 1) / this.itemsPerPage);
    var tdStyle = {width: "80px"}
    return (
      <div>
        <div>
          <table>
            <tbody>
              <tr>
                <td style={tdStyle}>{hasPrevious && <button onClick={this.handlePrevious} hidden={this.state.hasPrevious}> Previous </button>}</td>
                <td style={tdStyle}>{hasNext && <button onClick={this.handleNext} hidden={this.state.isNext}> Next </button>}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div>
          <table>
            <tbody>
              {this.getElements()}
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}