Learned how to modify objects in a component's state.

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})

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>
     );