Reading from the state

Author: smerth

src/components/App.js

@@ -1,12 +1,17 @@
 import React from 'react';
+import data from '../testData';
 import Header from './Header';
 import ContestPreview from './ContestPreview';
 
 class App extends React.Component {
   state = {
-    pageHeader: 'Naming Contests'
+    pageHeader: 'Naming Contests',
+    contests: []
   };
   componentDidMount() {
+    this.setState({
+      contests: data.contests
+    });
   }
   componentWillUnmount () {
   }
@@ -16,8 +21,8 @@ class App extends React.Component {
       <div className="App">
         <Header message={this.state.pageHeader} />
         <div>
-          {this.props.contests.map(contest => 
-            <ContestPreview {...contest}/>
+          {this.state.contests.map(contest => 
+            <ContestPreview key={contest.id} {...contest}/>
           )}        
         </div>
       </div>

src/index.js

@@ -1,10 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import data from './testData';
 import App from './components/App';
 
 ReactDOM.render(
-  <App contests={data.contests} />,
+  <App />,
   document.getElementById('root')
 );

webpack.config.babel.js

@@ -1,36 +1,19 @@
-const {resolve} = require('path');
-
-module.exports = () => {
-  return {
-    context: resolve('src'),
-    entry: './index.js',
-    output: {
-      path: resolve('public'),
-      filename: 'bundle.js'
-    },
-    module: {
-      rules: [
-        {
-          test: /\.js$/,
-          exclude: /(node_modules|bower_components)/,
-          use: {
-            loader: 'babel-loader',
-            options: {
-              presets: ['es2015', 'react', 'stage-2']
-            }
-          }
-        },
-        {
-          test: /\.json$/,
-          exclude: /(node_modules|bower_components)/,
-          use: {
-            loader: 'json-loader',
-            options: {
-              presets: ['env']
-            }
-          }
-        }
-      ]
-    }
-  };
+module.exports = {
+  entry: './src/index.js',
+  output: {
+    path: __dirname + '/public',
+    filename: 'bundle.js'
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.json$/,
+        loader: 'json-loader'
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader'
+      }
+    ]
+  }
 };