Candidate swapping button

src/js/components/Form.jsx

@@ -2,10 +2,12 @@ import React, { Component } from "react"
 import { connect } from "react-redux"
 import uuidv1 from "uuid"
 import { addArticle } from "../actions/index"
+import { setCandidate } from "../actions/index"
 
 function mapDispatchToProps(dispatch) {
   return {
-    addArticle: article => dispatch(addArticle(article))
+		addArticle: article => dispatch(addArticle(article)),
+		setCandidate: candidate => dispatch(setCandidate(candidate))
   }
 }
 
@@ -14,11 +16,14 @@ class ConnectedForm extends Component {
     super()
 
     this.state = {
-      title: ""
+			title: '',
+			candidate: 'Hillary'
     }
 
     this.handleChange = this.handleChange.bind(this)
-    this.handleSubmit = this.handleSubmit.bind(this)
+		this.handleSubmit = this.handleSubmit.bind(this)
+		this.clickTrump = this.clickTrump.bind(this)
+		this.clickHilary = this.clickHilary.bind(this)
   }
 
   handleChange(event) {
@@ -32,28 +37,47 @@ class ConnectedForm extends Component {
 
     this.props.addArticle({ title, id })
     this.setState({ title: "" })
-  }
+	}
+
+	clickTrump(event) {
+		event.preventDefault()
+		this.props.setCandidate('Donald Trump')
+		this.setState({ candidate: 'Donald Trump' })
+	}
+
+	clickHilary(event) {
+		event.preventDefault()
+		this.props.setCandidate('Hillary Clinton')
+		this.setState({ candidate: 'Hillary Clinton' })
+	}
 
   render() {
     const { title } = this.state
     return (
-      <form onSubmit={this.handleSubmit}>
-        <div className="form-group">
-          <label htmlFor="title">Title</label>
-          <input
-            type="text"
-            className="form-control"
-            id="title"
-            value={title}
-            onChange={this.handleChange}
-          />
-        </div>
-        <button type="submit" className="btn btn-success btn-lg">
-          SAVE
-        </button>
-      </form>
-    )
-  }
+			<div>
+				<form onSubmit={this.handleSubmit}>
+					<div className="form-group">
+						<label htmlFor="title">Title</label>
+						<input
+							type="text"
+							className="form-control"
+							id="title"
+							value={title}
+							onChange={this.handleChange}
+						/>
+					</div>
+					<button type="submit" className="btn btn-success btn-lg">
+						SAVE
+					</button>
+				</form>
+
+				<button onClick={this.clickTrump}>Donald Trump</button>
+				<button onClick={this.clickHilary}>Hillary Clinton</button>
+
+				<p>{this.state.candidate}</p>
+			</div>
+		)
+	}
 }
 
 const Form = connect(null, mapDispatchToProps)(ConnectedForm)

src/js/components/Posts.jsx

@@ -8,22 +8,27 @@ export class Post extends Component {
   }
 
   render() {
+		let cand = this.props.candidate === undefined ? 'Not set' : this.props.candidate
+
 		return (
-			<ul className="list-group list-group-flush">
+			<div>
+				<p>Candidate: {cand}</p>
+				<ul className="list-group list-group-flush">
         {this.props.articles.map(el => (
-          <li className="list-group-item" key={el.id_str}>
-						<p>{el.created_at}</p>
-						<p>{el.text}</p>
+          <li className="list-group-item" key={el.id}>
+						<p>{el.title}</p>
           </li>
         ))}
-      </ul>
+			</ul>
+		</div>
 		)
   }
 }
 
 function mapStateToProps(state) {
   return {
-    articles: state.remoteArticles.slice(0, 10)
+		articles: state.remoteArticles.slice(0, 10),
+		candidate: state.candidate
   }
 }