A small interesting program in Reactjs having issues

I want to take the numbers from 1 to 12 & want to show them by 4 items in the component like - first 4 numbers with the checkboxes at first, after clicking on next button next 4 numbers with the checkboxes should be showing up with and the previous button comes up to go back ... like this.. & also the even - odd buttons should be showing up beside them & suppose I'm checking on one checkbox in the component when I'm clicking on next and again coming back there, that checkbox should be showing selected or checked.

There have some problem in the code that's why what I'm wanting is not happening. Any help ?

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import Checkbox from 'material-ui/Checkbox';

class App extends Component {
   constructor() {
     super();
     this.state = {
        ids:[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        getids:[],
        idstaken:[],
        isPrevious: true,
        isNext: false,
        counter:0
     }
     this.getElements = this.getElements.bind(this);
     this.handleCheck = this.handleCheck.bind(this);
     this.handleDetails = this.handleDetails.bind(this);
     this.handlePrevious = this.handlePrevious.bind(this);
     this.handleNext = this.handleNext.bind(this);
   }
   componentDidMount() {
       let arr = [];
       for(var i=0; i<4; i++) {
          arr.push(this.state.ids[i]);
       }
       this.setState({getids: arr});
   }
   handlePrevious() {
       let arr = [];
       if(this.state.counter == 8) {
          this.setState({isPrevious: true, isNext: false});
       }
       for( var i = (this.state.counter - 8); i < (this.state.counter - 4); i++){
          arr.push(this.state.ids[i]);
       }
       this.setState({counter: arr.length, getids: arr});
     }
     handleNext() {
        let arr = [];
        if(this.state.counter == 8) {
           this.setState({isPrevious: false, isNext: true});
        }
        for(var i = this.state.counter; i < (this.state.counter + 4); i++){
           arr.push(this.state.ids[i]);
        } 
        this.setState({counter: arr.length, getids: arr});
     }
     handleCheck(e) {
        this.state.idstaken.push(e.currentTarget.id);
        console.log(e.currentTarget.id);
     }
     handleDetails() {
        console.log("even or odd is clicked!");
     }
     getElements() {
        let details;
        let array = [];
        let temp = [];
        this.state.getids.forEach(function(element) {
            if(element % 2 == 0) {
               details = <button onClick={this.handleDetails}> even </button>;
            }
            else {
               details = <button onClick={this.handleDetails}> odd </button>;
            }
            temp.push(
               <tr> 
                <td><Checkbox
                      id={element}
                      onCheck={this.handleCheck}
                   /></td>
                <td>{element}</td>
                <td>{details}</td> 
              </tr>
           );
         }, this)
         return temp;
      }
        render() {
          return(
            <MuiThemeProvider>
              <div>
                <div>
                  <table>
                    <tr>
                      <td><button onClick = {this.handlePrevious} hidden={this.state.isPrevious}> Previous </button></td>
                      <td><button onClick = {this.handleNext} hidden={this.state.isNext}> Next </button></td>
                    </tr>
                 </table>
               </div>
               <div>
                <table>
                  {this.getElements()}
                </table>
               </div>
             </div>
           </MuiThemeProvider>
          );  
        }
  }

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