Conflict Solved

src/client/components/ReqResCtrl.js

@@ -142,7 +142,9 @@ const ReqResCtrl = {
       });
     }
   },
-
+  toggleEndPoint(e) {
+    console.log('log')
+  },
   /* Creates a REQ/RES Obj based on event data and passes the object to fetchController */
   openEndPoint(e, abortController) {
     const reqResComponentID = e.target.id;

src/client/components/display/ReqRes.jsx

@@ -2,6 +2,8 @@ import React, { Component } from "react";
 import { connect } from 'react-redux';
 import Request from './Request.jsx';
 import Response from './Response.jsx';
+import ToggleBtn from './ToggleBtn.jsx';
+
 import ReqResCtrl from '../ReqResCtrl';
 
 import * as actions from '../../actions/actions';
@@ -40,7 +42,8 @@ class ReqRes extends Component {
         {this.props.content.timeReceived}
         {this.props.content.connectionType}
         {contentBody}
-        <button id={this.props.content.id} onClick={(e) => ReqResCtrl.openEndPoint(e, this.state.abortController)}>Send</button>
+        <ToggleBtn onClick={ ReqResCtrl.toggleEndPoint } />
+        <button id={this.props.content.id} onClick={ReqResCtrl.openEndPoint}>Send</button>
         <button onClick={() => {
           console.log(`aborting fetch for ReqRes ${this.props.content.id}.`);
           this.state.abortController.abort();

src/client/components/display/ToggleBtn.jsx

@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+class ToggleBtn extends Component {
+    constructor(props) {
+      super(props);
+      this.state = {
+          isToggled: true
+        };
+        this.handleClick = this.handleClick.bind(this);
+    }
+
+
+      handleClick() {
+      	this.setState(prevState => ({
+            isToggled: !prevState.isToggled
+      	}));
+      }
+
+    render() {
+      return (
+        <button onClick={this.handleClick}>
+          {this.state.isToggled ? 'OPEN CONNECTION' : 'CLOSE CONNECTION'}
+        </button>
+      );
+    }
+  }
+
+export default ToggleBtn;