handling the contest click event

Author: smerth

public/style.css

@@ -12,4 +12,9 @@
   .contest-name {
     padding: 0.5em;
   }
+
+}
+
+.link {
+  cursor: pointer;
 }

sass/style.scss

@@ -1,6 +1,6 @@
 import React from 'react';
 import Header from './Header';
-import ContestPreview from './ContestPreview';
+import ContestList from './ContestList';
 
 class App extends React.Component {
   state = {
@@ -17,11 +17,7 @@ class App extends React.Component {
     return (
       <div className="App">
         <Header message={this.state.pageHeader} />
-        <div>
-          {this.state.contests.map(contest => 
-            <ContestPreview key={contest.id} {...contest}/>
-          )}        
-        </div>
+        <ContestList contests={this.state.contests} />
       </div>
     );
   }

src/components/App.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import ContestPreview from './ContestPreview';
+
+const ContestList = ({contests}) => (
+  <div className="ContestList">
+    {contests.map(contest => 
+      <ContestPreview key={contest.id} {...contest}/>
+    )}        
+  </div>
+);
+
+ContestList.propTypes = {
+  contests: React.PropTypes.array
+};
+
+export default ContestList;

src/components/ContestList.js

@@ -1,16 +1,28 @@
-import React from 'react';
+import React, { Component } from 'react';
 
-const ContestPreview = (contest) => {
-  return (
-    <div className="ContestPreview">
-      <div className="category-name">
-        {contest.categoryName}
-      </div>
-      <div className="contest-name">
-        {contest.contestName}
+class ContestPreview extends Component {
+
+  handleClick = () => {
+    console.log(this.props.contestName);
+  }
+
+  render() {
+    return (
+      <div className="link ContestPreview" onClick={this.handleClick}>
+        <div className="category-name">
+          {this.props.categoryName}
+        </div>
+        <div className="contest-name">
+          {this.props.contestName}
+        </div>
       </div>
-    </div>
-  );
+    );
+  }
+}
+
+ContestPreview.propTypes = {
+  categoryName: React.PropTypes.string.isRequired,
+  contestName: React.PropTypes.string.isRequired
 };
 
 export default ContestPreview;