gistfile1.txt

import React, { Component } from 'react';
import Arrow from '../Assets/arrow.png';
import questions from '../sga-questions';
import ReactDOM from 'react-dom';
import { getPageNumber } from '../Helpers';

class Questions extends Component {

    constructor() {
      super( );
      this.state = { questions };
      localStorage.setItem("questions", questions);
    }

    goBack = () => {
      const currentNumber = getPageNumber(this.props.location.pathname);
      const newNumber = currentNumber - 1;
      currentNumber === 1 ? this.props.history.push(`/info`) : this.props.history.push(`/question/${newNumber}`);      
    }

    goForward = () => {
      const currentNumber = getPageNumber(this.props.location.pathname);
      const newNumber = currentNumber + 1;
      currentNumber === 137 ? this.props.history.push(`/results`) : this.props.history.push(`/question/${newNumber}`);
    }

    labelPretty = (e) => {
      const targetNode = ReactDOM.findDOMNode(e.target);
      const parent = targetNode.parentElement;
      parent.classList.add('labelPretty');   
    } 

    handleClick = e => {
      this.labelPretty(e); // Change the color of the label
      const number = e.target.value;
      console.log(`You answered ${number}`);
      // get the current page 
      const currentPage = getPageNumber(this.props.location.pathname);
      // Save the answer  
      localStorage.setItem(`${currentPage}`, e.target.value);

      
      // this.setState({ questions.question1.q = })
      // Navigate to the next question
      
    };

    render(){
        return <div className="questionWrapper">
            <form question="1">
              <fieldset>
                <legend>
                  {this.state.questions.question1.q}
                </legend>
              <label className={this.state.parentClass}>
                  <input type="checkbox" ref={this.myInput} onClick={this.handleClick} defaultValue={3} />
                  <span className="checkmark" />
                  <span className="marginLeft">Always</span>
                </label>
              <label className={this.state.parentClass}>
                <input type="checkbox" onClick={this.handleClick} defaultValue={2} />
                  <span className="checkmark" />
                  <span className="marginLeft">Usually</span>
                </label>
              <label className={this.state.parentClass}>
                  <input type="checkbox" onClick={this.handleClick} defaultValue={1} />
                  <span className="checkmark" />
                  <span className="marginLeft">Rarely</span>
                </label>
              <label className={this.state.parentClass}>
                <input type="checkbox" onClick={this.handleClick} defaultValue={0} />
                  <span className="checkmark" />
                  <span className="marginLeft">Never</span>
                </label>
              </fieldset>
            </form>
            <div className="bottomArrows">
              <div className="leftButton">
                <button onClick={this.goBack}>
                  <img src={Arrow} className="flipArrow" alt="Arrow Left" />
                </button>
              </div>
              <div className="rightButton">
                <button onClick={this.goForward}>
                  <img src={Arrow} alt="Arrow Right" />
                </button>
              </div>
            </div>
          </div>;
    }
}

export default Questions;