Get caught up to this step: Check out branch 06-delete-note - see Introduction for info on how to get caught up using branches.

Step 7: Making List Features Optional

Let's make the add item form and the delete button optional in the list. This will make the List component more versatile and easier to re-use.

Move optional features into a collection

/imports/components/lists/list.jsx

...
    const optionalFeatures = {
      addItem: () => <li className="list-group-item"><SingleFieldSubmit {...props} /></li>,
      deleteItem: (args) => <span className="pull-right"><DeleteBtn itemToDelete={args} {...props}/></span>
    }
...
}

Create a function for accessing a feature and passing in arguments

...
    const displayOptionalFeature = (shouldDisplay, feature, args ) => {
      return shouldDisplay? feature(args) : null
    }
...
}

Use the function to dynamically display a feature

...
    return <ul>
        {displayOptionalFeature(props.addItem, optionalFeatures.addItem)}
        { 
            props.collection.map((item) => {
               return <li key={item._id}>{item.content} {displayOptionalFeature(props.deleteItem, optionalFeatures.deleteItem, item)}
               </li>

          })
        }
  </ul>
}

Add propTypes and defaultProps to hide features by default

List.propTypes = {
    collection: React.PropTypes.array.isRequired,
    addItem: React.PropTypes.bool,
    deleteItem:  React.PropTypes.bool,
}
List.defaultProps = {
    addItem: false,
    deleteItem: false
}

"Turn on" the features via props

/imports/containers/note_container.jsx

  return {
     ...
      addItem: true,
      deleteItem: true
  }

Another advantage, in addition to component versatility, is feature scalability. We can now easily add numerous optional features to this list.