ReactJS Error: "Uncaught TypeError: this.props.alarms.forEach is not a function"
<p>To not deal with webpack and only focus purely on understanding React itself, I've started off by having all of my JS code inside an inlined script tag in the index.html file. I was able to completely write my app, with multiple components, passing props through each one, and get it working successfully without errors, all in one huge inlined script tag.</p>

<p>Now I want to integrate webpack into my project. My first goal is to split each component into its own file, import and export as necessary for each one - build it all into one bundle.js file that my index.html refers to. It builds successfully, but I'm now running into multiple errors from multiple components, with the same type of error:</p>

<blockquote>
  <p>Uncaught TypeError: this.props.alarms.forEach is not a function</p>
</blockquote>

<p>What's going on? Is it having trouble determining the context of <code>this</code>? If so, why's this issue now popping up after splitting the components into separate files?</p>

<p>Here's one of the child components <code>AlarmPage.js</code> throwing the error:</p>

<pre><code>import React from 'react';
import EditAlarmPage from './EditAlarmPage.js';
import AddAlarmPage from './AddAlarmPage.js';
import SettingsPage from './SettingsPage.js';
import AlarmTriggeredPage from './AlarmTriggeredPage.js';
import AlarmList from './AlarmList.js';

var AlarmPage = React.createClass({
  getDefaultProps: function() {
    return {
      //...
    };
  },
  getInitialState: function() {
    return {
       //...
    };
  },
  componentWillReceiveProps: function(nextProps) {
    console.log(this.props.alarms);
    this.props.alarms.forEach(function(alarm) {
      //...
    }, this);
  },
  render: function() {
    //...
  }
});
</code></pre>

<p>Here's its parent component <code>App.js</code>:</p>

<pre><code>import React from 'react';
import AlarmPage from './AlarmPage.js';

var App = React.createClass({
  getInitialState: function() {
    return {
      alarms: this.props.alarms,
      //...
    };
  },
  //...
  render: function() {
    return (
      &lt;div className="Main"&gt;
        &lt;AlarmPage alarms={this.state.alarms} /&gt;
      &lt;/div&gt;
    )
  }
});
</code></pre>

<p>console logging <code>this.props.alarms</code>:</p>

<pre><code>[{ "id": 0, "time": { "src": { "hour": 7, "minute": 30, "second": 0 }, "formatted": { "hour": 7, "minute": 30, "period": "AM", "second": 0 } }, "days": { "sun": false, "mon": true, "tue": true, "wed": true, "thu": true, "fri": true, "sat": false }, "repeat": true, "snooze": true, "vibrate": false, "activated": true }, { "id": 1, "time": { "src": { "hour": 22, "minute": 30, "second": 0 }, "formatted": { "hour": 10, "minute": 30, "period": "PM", "second": 0 } }, "days": { "sun": true, "mon": false, "tue": false, "wed": false, "thu": false, "fri": false, "sat": true }, "repeat": true, "snooze": true, "vibrate": false, "activated": false }]
</code></pre>

<p>webpack.config.js file</p>

<pre><code>module.exports = {
  entry: './js/main.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: 'node_modules',
        query: {
          presets: ['react', 'es2015']
        }
      }
    ]
  }
};
</code></pre>

<p><code>alarms</code> data structure:</p>

<pre><code>[
  {
    "id": 0,
    "time": {
      "src": {
        "hour": 7,
        "minute": 30,
        "second": 0
      },
      "formatted": {
        "hour": 7,
        "minute": 30,
        "second": 0,
        "period": "AM",
      }
    },
    "days": {
      "sun": false,
      "mon": true,
      "tue": true,
      "wed": true,
      "thu": true,
      "fri": true,
      "sat": false
    },
    "repeat": true,
    "snooze": true,
    "vibrate": false,
    "activated": true
  },
  {
    "id": 1,
    "time": {
      "src": {
        "hour": 22,
        "minute": 30,
        "second": 0
      },
      "formatted": {
        "hour": 10,
        "minute": 30,
        "second": 0,
        "period": "PM"
      }
    },
    "days": {
      "sun": true,
      "mon": false,
      "tue": false,
      "wed": false,
      "thu": false,
      "fri": false,
      "sat": true
    },
    "repeat": true,
    "snooze": true,
    "vibrate": false,
    "activated": false
  }
]
</code></pre>