Some final fixes

src/App.js

@@ -219,12 +219,13 @@ class App extends React.Component {
             <div className="App">
                 <div className="cluster">
                     <div className="chooser">
-                        <DisplayChooser categorySelections={categorySelections} handler={this}/>
+                        <DisplayChooser categorySelections={categorySelections} 
+                        handleCategoryChange={this.handleCategoryChange} />
                         <FavoriteSection save={this.saveAsFavorite} open={this.openFavorite}/>
                     </div>
                     <div className="artworkArea">
                         <Artwork artwork={this.state.artwork}
-                                 handler={this}
+                                 handleArtworkChange={this.handleArtworkChange}
                                  categorySelections={categorySelections}/>
                     </div>
                 </div>

src/components/Artwork.js

@@ -5,37 +5,26 @@ import Audio from './Audio';
 import Tabs from './Tabs';
 import '../style/Artwork.css';
 
-export default class Artwork extends React.Component {
-    constructor(props) {
-        super(props);
+export default function Artwork(props) {
 
-        this.handleArtworkChange = this.handleArtworkChange.bind(this);
-    }
-
-    handleArtworkChange(artwork) {
-        this.props.handler.handleArtworkChange(artwork);
-    }
-
-    render() {
-        const artwork = this.props.artwork;
-        const textCat = this.props.categorySelections.textCat;
-        const imgCat = this.props.categorySelections.imageCat;
-        const audioCat = this.props.categorySelections.audioCat;
-        return (
-            <div className="theArtwork">
-                <div className="tabs">
-                    <Tabs artwork={artwork} onArtworkChange={this.handleArtworkChange}/>
-                </div>
-                <div className="text">
-                    <Text artwork={artwork} cat={textCat}/>
-                </div>
-                <div className="theImage">
-                    <Image id="myImage" artwork={artwork} cat={imgCat}/>
-                </div>
-                <div className="audio">
-                    <Audio artwork={artwork} cat={audioCat}/>
-                </div>
+    const artwork = props.artwork;
+    const textCat = props.categorySelections.textCat;
+    const imgCat = props.categorySelections.imageCat;
+    const audioCat = props.categorySelections.audioCat;
+    return (
+        <div className="theArtwork">
+            <div className="tabs">
+                <Tabs artwork={artwork} onArtworkChange={props.handleArtworkChange}/>
+            </div>
+            <div className="text">
+                <Text artwork={artwork} cat={textCat}/>
+            </div>
+            <div className="theImage">
+                <Image id="myImage" artwork={artwork} cat={imgCat}/>
+            </div>
+            <div className="audio">
+                <Audio artwork={artwork} cat={audioCat}/>
             </div>
-        );
-    }
+        </div>
+    );
 }

src/components/DisplayChooser.js

@@ -10,7 +10,7 @@ export default class DisplayChooser extends React.Component {
     }
 
     combineMediaCategories = event => {
-        this.props.handler.handleCategoryChange(event.target.name, event.target.value);
+        this.props.handleCategoryChange(event.target.name, event.target.value);
         localStorage.setItem(event.target.name, event.target.value);
     };
 
@@ -19,11 +19,11 @@ export default class DisplayChooser extends React.Component {
         return (
             <div className="Display-chooser">
                 <MediaContainer checkedIndex={this.props.categorySelections.textCat} categoryNames={categoryNames}
-                                media="Text" handler={this}/>
+                                media="Text" combineMediaCategories={this.combineMediaCategories} />
                 <MediaContainer checkedIndex={this.props.categorySelections.imageCat} categoryNames={categoryNames}
-                                media="Image" handler={this}/>
+                                media="Image" combineMediaCategories={this.combineMediaCategories} />
                 <MediaContainer checkedIndex={this.props.categorySelections.audioCat} categoryNames={categoryNames}
-                                media="Audio" handler={this}/>
+                                media="Audio" combineMediaCategories={this.combineMediaCategories} />
             </div>
         );
     }

src/components/MediaContainer.js

@@ -16,17 +16,17 @@ export default class MediaContainer extends React.Component {
             <div className="Media-component">
                 <h3>{this.props.media}</h3>
                 <Categories value={categories[0]} mediaType={this.props.media}
-                            handleChange={this.props.handler.combineMediaCategories}
+                            handleChange={this.props.combineMediaCategories}
                             categoryName={this.props.categoryNames[0]}
                             selectionName={this.props.media + categories[0]}
                             checked={checked[0]}/>
                 <Categories value={categories[1]} mediaType={this.props.media}
-                            handleChange={this.props.handler.combineMediaCategories}
+                            handleChange={this.props.combineMediaCategories}
                             categoryName={this.props.categoryNames[1]}
                             selectionName={this.props.media + categories[1]}
                             checked={checked[1]}/>
                 <Categories value={categories[2]} mediaType={this.props.media}
-                            handleChange={this.props.handler.combineMediaCategories}
+                            handleChange={this.props.combineMediaCategories}
                             categoryName={this.props.categoryNames[2]}
                             selectionName={this.props.media + categories[2]}
                             checked={checked[2]}/>