TasksListCell modifications

Finally, we want to edit each row rendered by our ListView to display the due date, if one exists.

To do this, we will have to write some conditional logic to show the formatted date, if one is assigned to the to-do item we are rendering. This is also a good time to create a custom styles folder for this component as we will be needing it.

Spend some time creating your version of this feature. My solution is as follows:

// Tasks/app/components/TasksListCell/index.js 

... 
import styles from './styles'; 

You might notice from the above import statement that TasksListCell now imports its StyleSheet.

Add formattedDate to propTypes as an optional string:

export default class TasksListCell extends Component { 
  static propTypes = { 
    ... 
    formattedDate: PropTypes.string, 
  } 

... 
  render () { 
    ... 
    return ( 
      <View style={ styles.tasksListCellContainer }> 
        <TouchableHighlight 
          ... 
        > 
          <View style...