firstpart/Problem4 - Finished - Made a button to switch between the componenets

2b9445ed · Martin Wighus Holtmon · dc5a5b03 · 2b9445ed · 2b9445ed · 2b9445ed
Commit 2b9445ed authored 3 years ago by Martin Wighus Holtmon
--- a/projectFirstPart/p2.html
+++ b/projectFirstPart/p2.html
--- a/projectFirstPart/p4.html
+++ b/projectFirstPart/p4.html
@@ -4,6 +4,7 @@
    <title>CS142 Class Project</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <script src="modelData/states.js"></script>
+    <script src="modelData/example.js"></script>
 </head>
 <body>
 <div id="reactapp">

--- a/projectFirstPart/p4.jsx
+++ b/projectFirstPart/p4.jsx
 import React from 'react';
 import ReactDOM from 'react-dom';
+import States from './components/states/States';
+import Example from './components/example/Example';

-//import States from './components/states/States';
+class P4 extends React.Component {
+    constructor(props) {
+        super(props);
+        this.handleButtonClick = this.handleButtonClick.bind(this);
+        this.state = {activePage: States, nextPage: Example}
+        console.log(this.state.activePage.name)
+    }
+
+    handleButtonClick() {
+        this.setState({activePage: this.state.nextPage, nextPage: this.state.activePage})
+    }
+
+    render() {
+        return(
+            <div>
+                <button type="button" onClick={this.handleButtonClick}>Switch to {this.state.nextPage.name}</button>
+                <this.state.activePage/>
+            </div>
+        )
+    }
+}

 ReactDOM.render(
-    <h1>page4</h1>,
+    <P4/>,
    document.getElementById('reactapp'),
 );