title: React - Uncaught TypeError: Cannot read property 'indexOf' of undefined
body: <p>I have the following component:</p>
  
  <pre><code>import React, { Component } from 'react';
  
  import Utilities from './utilities.js';
  
  import Action from './action.jsx';
  import SingleGridEl from './singleGridEl.jsx';
  
  class Grid extends Component {
  
      constructor(props) {
          super(props);
          this.question;
          this.maxN = 110;
          this.array = [];
  
          this.state = {
              n1: false,
              n2: false,
              n3: false,
              n4: false,
              n5: false,
              n6: false,
              n7: false,
              n8: false,
              n9: false,
              n10: false,
              n11: false,
              n12: false,
              n13: false,
              n14: false,
              n15: false,
              n16: false,
              n17: false,
              n18: false,
              n19: false,
              n20: false,
              n21: false,
              n22: false,
              n23: false,
              n24: false
          }
  
          this.hideSingleGrid = this.hideSingleGrid.bind(this);
      }
  
      getRandomQuestion() {   
          let randomN = Utilities.generateRandomNumber(this.array, this.maxN);
          console.log(randomN);
          this.question = this.props.current.data.questions[randomN];
          console.log(this.question);
          return this.question;
      }
  
      hideSingleGrid(el, val) {
          var s = {};
          s[el] = val;
          this.setState(s);
      }
  
      componentWillMount() {
          this.getRandomQuestion();
      }
  
      render() {
          return (
              &lt;section className="game"&gt;
                  &lt;div className="grid"&gt;
  
                      &lt;div className="row"&gt;
                          &lt;SingleGridEl visibility={this.state.n1} /&gt;
                          &lt;SingleGridEl visibility={this.state.n2} /&gt;
                          &lt;SingleGridEl visibility={this.state.n3} /&gt;
                          &lt;SingleGridEl visibility={this.state.n4} /&gt;
                          &lt;SingleGridEl visibility={this.state.n5} /&gt;
                          &lt;SingleGridEl visibility={this.state.n6} /&gt;
                      &lt;/div&gt;
                      &lt;div className="row"&gt;
                          &lt;SingleGridEl visibility={this.state.n7} /&gt;
                          &lt;SingleGridEl visibility={this.state.n8} /&gt;
                          &lt;SingleGridEl visibility={this.state.n9} /&gt;
                          &lt;SingleGridEl visibility={this.state.n10} /&gt;
                          &lt;SingleGridEl visibility={this.state.n11} /&gt;
                          &lt;SingleGridEl visibility={this.state.n12} /&gt;
                      &lt;/div&gt;
                      &lt;div className="row"&gt;
                          &lt;SingleGridEl visibility={this.state.n13} /&gt;
                          &lt;SingleGridEl visibility={this.state.n14} /&gt;
                          &lt;SingleGridEl visibility={this.state.n15} /&gt;
                          &lt;SingleGridEl visibility={this.state.n16} /&gt;
                          &lt;SingleGridEl visibility={this.state.n17} /&gt;
                          &lt;SingleGridEl visibility={this.state.n18} /&gt;
                      &lt;/div&gt;
                      &lt;div className="row"&gt;
                          &lt;SingleGridEl visibility={this.state.n19} /&gt;
                          &lt;SingleGridEl visibility={this.state.n20} /&gt;
                          &lt;SingleGridEl visibility={this.state.n21} /&gt;
                          &lt;SingleGridEl visibility={this.state.n22} /&gt;
                          &lt;SingleGridEl visibility={this.state.n23} /&gt;
                          &lt;SingleGridEl visibility={this.state.n24} /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;Action t={this.hideSingleGrid} question={this.question} getRandomQuestion={this.getRandomQuestion.bind(this)}/&gt;
              &lt;/section&gt;
          );
      }
  }
  
  export default Grid;
  </code></pre>
  
  <p>which makes use of a utility method from:</p>
  
  <pre><code>var Utilities = (function (array, maxN) {
  
      function generateRandomNumber(array, maxN) {
          let randomN = Math.floor((Math.random() * maxN) + 1);
  
          if(array.indexOf(randomN) === -1) {
              array.push(randomN);
          }
          else {
              randomN = generateRandomNumber();
          }
  
          console.log(array);
  
          return randomN;
      }
  
      return {
          generateRandomNumber: generateRandomNumber
      };
  
  })();
  
  export default Utilities;
  </code></pre>
  
  <p>This utility method generates a random number and stores it in an array so that every random number returned is unique based on the max length passed in.</p>
  
  <p>the action.jsx component makes use of the same utility method:</p>
  
  <pre><code>import React, { Component } from 'react';
  
  import Utilities from './utilities.js';
  
  class Action extends Component {
      constructor(props) {
          super(props);
  
          this.maxN = 24;
          this.array = [];
  
          this.state = {
              question: props.question
          }
      }
  
      getNewQuestion(e) {
          let answerId = "option_" + this.state.question.correct_option;
  
          if(e.target.getAttribute('data-question') == answerId) {
              let randomNumber = Utilities.generateRandomNumber(this.array, this.maxN);
              this.props.t('n'+randomNumber, true);
              this.setState({
                  question: this.props.getRandomQuestion()
              });
          }
          else {
              console.log('wrong');
          }
      }
  
      render() {
          let state = this.state;
  
          return(
              &lt;div className="action"&gt;
                  &lt;div className="action-question"&gt;
                      &lt;h3&gt;{state.question.question}&lt;/h3&gt;
                  &lt;/div&gt;
  
                  &lt;div className="action-answers"&gt;
                      &lt;p data-question="option_1" onClick={this.getNewQuestion.bind(this)}&gt;{state.question.option_1}&lt;/p&gt;
                      &lt;p data-question="option_2" onClick={this.getNewQuestion.bind(this)}&gt;{state.question.option_2}&lt;/p&gt;
                      &lt;p data-question="option_3" onClick={this.getNewQuestion.bind(this)}&gt;{state.question.option_3}&lt;/p&gt;
                      &lt;p data-question="option_4" onClick={this.getNewQuestion.bind(this)}&gt;{state.question.option_4}&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }   
  
  export default Action;  
  </code></pre>
  
  <p>when I click on each "p", the "this.getNewQuestion" checks if we clicked on the right answer and move onto the next question with relative answers.</p>
  
  <p>At some point (very randomly) during the game, I get the following error  in the console. The error refers to the utility method:</p>
  
  <pre><code>if(array.indexOf(randomN) === -1) {
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/9HBPz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9HBPz.png" alt="enter image description here"></a></p>
  
  <p>I can't figure out what's causing that error..</p>