Flatten props and add keys to array elements

components/chart/chart.js

@@ -18,7 +18,7 @@ export default class CycleChart extends Component {
     this.renderColumn = ({item, index}) => {
       return (
         <DayColumn
-          item={item}
+          {...item}
           index={index}
           navigate={this.props.navigation.navigate}
           {...getInfoForNeighborColumns(index, this.state.columns)}

components/chart/day-column.js

@@ -15,10 +15,6 @@ const label = styles.column.label
 const getFhmAndLtlInfo = setUpFertilityStatusFunc()
 
 export default class DayColumn extends Component {
-  constructor(props) {
-    super(props)
-  }
-
   passDateToDayView(dateString) {
     const cycleDay = getOrCreateCycleDay(dateString)
     this.props.navigate('cycleDay', { cycleDay })
@@ -36,7 +32,7 @@ export default class DayColumn extends Component {
       temperatureExclude,
       bleeding,
       mucus
-    } = this.props.item
+    } = this.props
     const nfpLineInfo = getFhmAndLtlInfo(dateString, temperature)
 
     const columnElements = []
@@ -50,6 +46,7 @@ export default class DayColumn extends Component {
           size={30}
           color='#900'
           style={{ marginTop: 20 }}
+          key='bleeding'
         />
       )
     }
@@ -62,6 +59,7 @@ export default class DayColumn extends Component {
           left = {config.columnMiddle - styles.mucusIcon.width / 2}
           {...styles.mucusIcon}
           backgroundColor={styles.mucusIconShades[mucus]}
+          key='mucus'
         />
       )
       columnElements.push(mucusIcon)
@@ -74,6 +72,7 @@ export default class DayColumn extends Component {
         width={styles.nfpLine.strokeWidth}
         height={200}
         {...styles.nfpLine}
+        key='fhm'
       />)
       columnElements.push(fhmLine)
     }
@@ -84,6 +83,7 @@ export default class DayColumn extends Component {
         width={'100%'}
         top={nfpLineInfo.drawLtlAt}
         {...styles.nfpLine}
+        key='ltl'
       />)
       columnElements.push(ltlLine)
     }
@@ -93,8 +93,11 @@ export default class DayColumn extends Component {
         <DotAndLine
           y={y}
           exclude={temperatureExclude}
+          rightY={this.props.rightY}
+          rightTemperatureExclude={this.props.rightTemperatureExclude}
           leftY={this.props.leftY}
-          rightY={this.props.righty}
+          leftTemperatureExclude={this.props.leftTemperatureExclude}
+          key='dotandline'
         />
       )
     }
@@ -111,7 +114,7 @@ export default class DayColumn extends Component {
       </Text>
     )
     columnElements.push(
-      <View position='absolute' bottom={0}>
+      <View position='absolute' bottom={0} key='date'>
         {cycleDayLabel}
         {dateLabel}
       </View>

components/chart/dot-and-line.js

@@ -4,6 +4,10 @@ import styles from './styles'
 import config from './config'
 
 export default class DotAndLine extends Component {
+  shouldComponentUpdate(newProps) {
+    return Object.keys(newProps).some(key => newProps[key] != this.props[key])
+  }
+
   render() {
     const y = this.props.y
     const exclude = this.props.exclude
@@ -28,6 +32,7 @@ export default class DotAndLine extends Component {
         top={y - (dotStyle.height / 2)}
         left={config.columnMiddle - (dotStyle.width / 2)}
         style={dotStyle}
+        key='dot'
       />
     )
     return [lineToLeft, lineToRight, dot]
@@ -61,5 +66,6 @@ function makeLine(leftY, rightY, direction, excludeLine) {
       ],
     }}
     {...lineStyle}
+    key ={direction}
   />)
 }
\ No newline at end of file