title: ReactJS: Uncaught ReferenceError: [function] not defined, July 2017
body: <p>Attempting to turn a JSON file into an array, then randomly selecting 5 items from it.</p>
  
  <p>I <em>think</em> the issue is my render/return statement at the bottom of ImageContainer.js, but I'm a ReactJS n00b, so it could be anything.</p>
  
  <p>Any help or advice is greatly appreciated.</p>
  
  <p><strong>Console Error</strong></p>
  
  <pre><code>compiled.js:31562 Uncaught ReferenceError: selectImages is not defined
    at ImageContainer.render (compiled.js:31562)
    at compiled.js:20195
    at measureLifeCyclePerf (compiled.js:19475)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (compiled.js:20194)
    at ReactCompositeComponentWrapper._renderValidatedComponent (compiled.js:20221)
    at ReactCompositeComponentWrapper.performInitialMount (compiled.js:19761)
    at ReactCompositeComponentWrapper.mountComponent (compiled.js:19657)
    at Object.mountComponent (compiled.js:4009)
    at ReactDOMComponent.mountChildren (compiled.js:24150)
    at ReactDOMComponent._createInitialChildren (compiled.js:21126)
  </code></pre>
  
  <p><strong>ImageContainer.js</strong> - pulls img info from a .JSON file, randomly selects 5 to render</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import { Image } from './Image';
  
  export class ImageContainer extends React.Component {
    constructor(props) {
      super(props);
  
      this.numImages = 5;
  
      this.state = {
        data: []
      };
    }
  
    componentDidMount() {
      $.ajax({
        url: '../app/data/namegame-data.json',
        dataType: 'json',
        success: function(data) {
          this.setState({data: data});
        }.bind(this),
        error: function(xhr, status, err) {
          console.error('#GET Error', status, err.toString());
        }.bind(this)
      });
    }
  
    shuffleArray(array) {
      let i = array.length - 1;
      for (; i &gt; 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        const temp = array[i];
        array[i] = array[j];
        array[j] = temp;
      }
      return array;
    }
  
    selectImages({ data }) {
      const shuffledImages = shuffleArray(images);
      return (
        shuffledImages.map((data, idx) =&gt; {
          for (let i = 0; i &lt; this.numImages; i++) {
              if (this.state.data.length &gt; 0) {
                  return &lt;Image key={idx} name={data.name} src={data.src} /&gt;;
              }
          }
        })
      );
    }
  
    render() {
      return {selectImages};
    }
  }
  </code></pre>
  
  <p><strong>Image.js</strong> - just the image HTML</p>
  
  <pre><code>import React from 'react';
  
  export class Image extends React.Component {
      render() {
          const key = this.props.id;
          const name = this.props.name;
          const src = this.props.src;
          return (
              &lt;picture&gt;
                  &lt;img id="pic-template" className="pic" src="{src}" name="{name}" key="id" /&gt;
              &lt;/picture&gt;
          );
      }
  }
  </code></pre>
  
  <p><strong>[Main].js</strong> - most of the HTML is here, just including the import bits</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import { ImageContainer } from './ImageContainer';
  
  export default class NameGame extends React.Component {
    render () {
      return (
        ...
        &lt;div id="images-wrap"&gt;
            &lt;ImageContainer /&gt;
        &lt;/div&gt;
        ...
      );
    }
  }
  </code></pre>
  
  <p><strong>Dependencies</strong></p>
  
  <pre><code>{
    ...
    "dependencies": {
      "json-loader": "^0.5.4",
      "react": "^15.6.1",
      "react-dom": "^15.6.1"
    },
    "devDependencies": {
      "css-loader": "^0.28.4",
      "extract-text-webpack-plugin": "^2.1.2",
      "node-sass": "^4.5.3",
      "sass-loader": "^6.0.6",
      "style-loader": "^0.18.2",
      "webpack": "^2.2.0",
      "webpack-dev-server": "^2.5.0"
    }
  }
  </code></pre>