Merge pull request #281 from appfolio/fixReactWarnings

Fix react warnings
appfolio · Aug 14, 2017 · a356ec0 · a356ec0
2 parents 3c7fa99 + 41b7336
commit a356ec0
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 8 deletions.
diff --git a/src/components/Notes.js b/src/components/Notes.js
@@ -57,9 +57,10 @@ export default class Notes extends React.Component {
           </Col>
         </Row>
         {children ||
-          notes.map(note =>
+          notes.map((note, i) =>
             <Note
               note={note}
+              key={i}
               onCancel={onCancel}
               onChange={onChange}
               onDelete={onDelete}

diff --git a/src/components/datemonth/DateMonth.js b/src/components/datemonth/DateMonth.js
@@ -70,20 +70,42 @@ export default class DateMonth extends React.Component {
     document.removeEventListener('keydown', this.escListener);
   }
 
-  setMonth(month) {
+  setMonth = month => () => {
     this.setState({ month });
   }
 
-  setYear(year) {
+  setYear = year => () => {
     this.setState({ year });
   }
 
-  render() {
-    const { props, state } = this;
+  renderMonths = () => MONTHS.map(month => (
+    <Label
+      selected={this.state.month === month}
+      label={month}
+      key={month}
+      onClick={this.setMonth(month)}
+    />
+  ));
+
+  renderYears = () => {
     const now = new Date();
-    const end = state.year + (now.getFullYear() - state.year) % 10 + 1;
+    const { year: currentYear } = this.state;
+    const end = currentYear + (now.getFullYear() - currentYear) % 10 + 1;
     const start = end - 10;
     const YEARS = range(start, end);
+    return YEARS.map(year => (
+      <Label
+        selected={currentYear === year}
+        label={year}
+        key={year}
+        onClick={this.setYear(year)}
+      />
+    ));
+  }
+
+  render() {
+    const { props, state } = this;
+    const now = new Date();
     const canAdvanceYear = now.getFullYear() - state.year > 9;
 
     const open = () => this.setState({
@@ -157,12 +179,13 @@ export default class DateMonth extends React.Component {
         <Dropdown
           className={styles.picker}
           isOpen={state.open}
+          toggle={toggle}
         >
           <DropdownMenu>
             <Row className="no-gutters">
               <Col xs="6" className={styles.month}>
                 <ul className="p-1 m-0">
-                  {MONTHS.map(month => <Label selected={state.month === month} label={month} onClick={() => this.setMonth(month)} />)}
+                  {this.renderMonths()}
                 </ul>
               </Col>
 
@@ -176,7 +199,7 @@ export default class DateMonth extends React.Component {
                   </Button>
                 </ButtonGroup>
                 <ul className="p-1 m-0">
-                  {YEARS.map(year => <Label selected={state.year === year} label={year} onClick={() => this.setYear(year)} />)}
+                  {this.renderYears()}
                 </ul>
               </Col>
             </Row>