Button onClick and conditional rendering

src/App.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import CardEditor from './CardEditor';
+import CardViewer from './CardViewer';
 
 class App extends React.Component {
   constructor(props) {
@@ -9,11 +10,36 @@ class App extends React.Component {
         { front: 'front1', back: 'back1' },
         { front: 'front2', back: 'back2' },
       ],
+      editor: true,
     };
   }
 
+  addCard = card => {
+    const cards = this.state.cards.slice().concat(card);
+    this.setState({ cards });
+  };
+
+  deleteCard = index => {
+    const cards = this.state.cards.slice();
+    cards.splice(index, 1);
+    this.setState({ cards });
+  };
+
+  switchMode = () => this.setState({ editor: !this.state.editor });
+
   render() {
-    return <CardEditor cards={this.state.cards} />;
+    if (this.state.editor) {
+      return (
+        <CardEditor
+          addCard={this.addCard}
+          cards={this.state.cards}
+          deleteCard={this.deleteCard}
+          switchMode={this.switchMode}
+        />
+      );
+    } else {
+      return <CardViewer switchMode={this.switchMode} />;
+    }
   }
 }
 

src/CardEditor.js

@@ -7,6 +7,13 @@ class CardEditor extends React.Component {
     this.state = { front: '', back: '' };
   }
 
+  addCard = () => {
+    this.props.addCard(this.state);
+    this.setState({ front: '', back: '' });
+  };
+
+  deleteCard = index => this.props.deleteCard(index);
+
   handleChange = event =>
     this.setState({ [event.target.name]: event.target.value });
 
@@ -17,7 +24,7 @@ class CardEditor extends React.Component {
           <td>{card.front}</td>
           <td>{card.back}</td>
           <td>
-            <button>Delete card</button>
+            <button onClick={() => this.deleteCard(index)}>Delete card</button>
           </td>
         </tr>
       );
@@ -49,7 +56,9 @@ class CardEditor extends React.Component {
           placeholder="Back of card"
           value={this.state.back}
         />
-        <button>Add card</button>
+        <button onClick={this.addCard}>Add card</button>
+        <hr />
+        <button onClick={this.props.switchMode}>Go to card viewer</button>
       </div>
     );
   }

src/CardViewer.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+class CardViewer extends React.Component {
+  render() {
+    return (
+      <div>
+        <h2>Card Viewer</h2>
+        <hr />
+        <button onClick={this.props.switchMode}>Go to card editor</button>
+      </div>
+    );
+  }
+}
+
+export default CardViewer;