3 files changed, 15 insertions, 14 deletions
diff --git a/animism-align/frontend/app/views/viewer/checklist/checklist.container.js b/animism-align/frontend/app/views/viewer/checklist/checklist.container.js
index 7a8db0e..11310e7 100644
--- a/animism-align/frontend/app/views/viewer/checklist/checklist.container.js
+++ b/animism-align/frontend/app/views/viewer/checklist/checklist.container.js
@@ -9,33 +9,34 @@ import CreditsContent from './credits.content'
 
 class Checklist extends Component {
   state = {
-    currentSection: 'all',
+    checklistSection: 'all',
   }
   constructor(props) {
     super(props)
     this.handleSectionChange = this.handleSectionChange.bind(this)
   }
-  handleSectionChange(currentSection) {
-    this.setState({ currentSection })
+  handleSectionChange(checklistSection) {
+    this.setState({ checklistSection })
   }
   render() {
-    const { currentSection } = this.state
+    const { viewer } = this.props
+    const { checklistSection } = this.state
     return (
       <div className="checklist">
-        (viewer.checklist && (
+        {viewer.checklist && (
           <div>
             <ChecklistDropdown
-              currentSection={currentSection}
+              checklistSection={checklistSection}
               onChange={this.handleSectionChange}
             />
             <ChecklistContent
-              currentSection={currentSection}
+              checklistSection={checklistSection}
             />
           </div>
-        )
-        (viewer.credits && (
+        )}
+        {viewer.credits && (
           <CreditsContent />
-        ))
+        )}
       </div>
     )
   }
diff --git a/animism-align/frontend/app/views/viewer/checklist/checklist.content.js b/animism-align/frontend/app/views/viewer/checklist/checklist.content.js
index 1406996..d0f115c 100644
--- a/animism-align/frontend/app/views/viewer/checklist/checklist.content.js
+++ b/animism-align/frontend/app/views/viewer/checklist/checklist.content.js
@@ -13,12 +13,12 @@ class ChecklistContent extends Component {
   }
 
   render() {
-    const { sections, currentSection } = this.props
+    const { sections, checklistSection } = this.props
     return (
       <div className="checklist-content">
         <div className="checklist-table">
           {sections.map(section => {
-            if ((currentSection !== "all" && section.index !== currentSection) || !section.media.length) {
+            if ((checklistSection !== "all" && section.index !== checklistSection) || !section.media.length) {
               return <div key={section.index} />
             }
             return (
diff --git a/animism-align/frontend/app/views/viewer/checklist/checklist.dropdown.js b/animism-align/frontend/app/views/viewer/checklist/checklist.dropdown.js
index 0ed2f0d..58695e0 100644
--- a/animism-align/frontend/app/views/viewer/checklist/checklist.dropdown.js
+++ b/animism-align/frontend/app/views/viewer/checklist/checklist.dropdown.js
@@ -17,13 +17,13 @@ class ChecklistDropdown extends Component {
     this.setState({ open: false })
   }
   render() {
-    const { sections, currentSection } = this.props
+    const { sections, checklistSection } = this.props
     const { open } = this.state
     return (
       <div className="checklist-dropdown-column">
         <div className="checklist-dropdown-container">
           <div className="checklist-dropdown" onClick={() => this.handleOpen()}>
-            {currentSection === 'all' ? 'View All' : 'Section ' + ROMAN_NUMERALS[currentSection]}
+            {checklistSection === 'all' ? 'View All' : 'Section ' + ROMAN_NUMERALS[checklistSection]}
             <div className='arrow-box'>
               <Arrow type={open ? 'up' : 'down'} />
             </div>