From 9a90108fe689a952955a2869278c007770ca6dc6 Mon Sep 17 00:00:00 2001
From: Robbie Antenesse <gamedev@alamantus.com>
Date: Thu, 22 Sep 2016 08:25:49 -0600
Subject: [PATCH] Learned how to modify objects in a component's state.

---
 src/components/Dictionary.jsx | 17 ++++++++++++-----
 src/index.jsx                 | 15 +++++++++++++++
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/components/Dictionary.jsx b/src/components/Dictionary.jsx
index a3b8215..4165e89 100644
--- a/src/components/Dictionary.jsx
+++ b/src/components/Dictionary.jsx
@@ -8,6 +8,7 @@ export class Dictionary extends React.Component {
     super(props);
 
     this.state = {
+      dictionary: this.props.reference,
       name: this.props.reference.name,
       description: this.props.reference.description,
       createdBy: this.props.reference.createdBy,
@@ -56,17 +57,19 @@ export class Dictionary extends React.Component {
     }, () => console.log(this.state.words));
   }
 
-  changeTestWord() {
-    this.setState(
-      words[0].name: 'cool'
-    );
+  changeNameAgain() {
+    let updateDictionary = this.state.dictionary;
+    updateDictionary.name = 'something else again'
+    this.setState({
+      dictionary: updateDictionary
+    })
   }
 
   render() {
     return (
       <div>
         <h1 id="dictionaryName">
-          {this.state.name}
+          {this.state.dictionary.name}
         </h1>
         
         <h4 id="dictionaryBy">
@@ -84,6 +87,10 @@ export class Dictionary extends React.Component {
           action={() => this.addTestWord()}
           label='Add a Test Word' />
 
+        <Button
+          action={() => this.changeNameAgain()}
+          label='Change Name Again' />
+
         <Button
           action={() => {
             this.setState({isComplete: !this.state.isComplete})
diff --git a/src/index.jsx b/src/index.jsx
index 70dc000..d6944b5 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -6,6 +6,7 @@ import ReactDOM from 'react-dom';
 
 import {Header} from './components/Header';
 import {NewWordForm} from './components/NewWordForm';
+import {Button} from './components/Button';
 import {Dictionary} from './components/Dictionary';
 
 class Lexiconga extends React.Component {
@@ -42,11 +43,25 @@ class Lexiconga extends React.Component {
     // this.addTestWord();
   }
 
+  changeDictionaryName() {
+    // To change elements within the dictionary object, you can set it to
+    // a variable, manipulate the variable, then use setState() to set
+    // the object equal to the changed variable.
+    let updateDictionary = this.state.currentDictionary;
+    updateDictionary.name = 'something else'
+    this.setState({
+      currentDictionary: updateDictionary
+    })
+  }
+
   render() {
     return (
       <div>
         <Header />
         <NewWordForm reference={this.state.currentDictionary} />
+        <Button
+          action={() => this.changeDictionaryName()}
+          label='change name' />
         <Dictionary reference={this.state.currentDictionary} />
       </div>
     );