Better names for variables!

frontend/src/components/search/Search.js

+// Inspired by : https://material-ui.com/demos/autocomplete/
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import deburr from 'lodash/deburr';
@@ -10,12 +12,6 @@ import MenuItem from '@material-ui/core/MenuItem';
 import Chip from '@material-ui/core/Chip';
 import _ from 'underscore'
 
-const suggestions = [
-  { label: 'Afghanistan', id: 1 },
-  { label: 'Aland Islands', id: 2 },
-  { label: 'Albania', id: 3 },
-  { label: 'Algeria', id: 4 },
-];
 
 function renderInput(inputProps) {
   const { InputProps, classes, ref, ...other } = inputProps;
@@ -64,23 +60,26 @@ renderSuggestion.propTypes = {
 class DownshiftMultiple extends React.Component {
   state = {
     inputValue: '',
-    selectedItem: [],
+    selectedItems: [],
   };
+
   componentDidUpdate(prevProps, prevState, snapshot) {
-    if (this.state.selectedItem != prevState.selectedItem) {
-      this.props.onChange(this.state.selectedItem);
+    if (this.state.selectedItems != prevState.selectedItems) {
+      this.props.onChange(this.state.selectedItems);
     }
   }
 
 
   getSuggestions(value) {
+    const { options } = this.props;
+    const { selectedItems } = this.state;
     const inputValue = deburr(value.trim()).toLowerCase();
     const inputLength = inputValue.length;
     let count = 0;
     if (inputLength === 0) {
       return []
     } else {
-      let out = _.difference(suggestions, this.state.selectedItem).filter(suggestion => {
+      let out = _.difference(options, selectedItems).filter(suggestion => {
         const keep =
           count < 5 && suggestion.label.slice(0, inputLength).toLowerCase() === inputValue;
 
@@ -95,10 +94,10 @@ class DownshiftMultiple extends React.Component {
   }
 
   handleKeyDown = event => {
-    const { inputValue, selectedItem } = this.state;
-    if (selectedItem.length && !inputValue.length && keycode(event) === 'backspace') {
+    const { inputValue, selectedItems } = this.state;
+    if (selectedItems.length && !inputValue.length && keycode(event) === 'backspace') {
       this.setState({
-        selectedItem: selectedItem.slice(0, selectedItem.length - 1),
+        selectedItems: selectedItems.slice(0, selectedItems.length - 1),
       });
     }
   };
@@ -108,12 +107,13 @@ class DownshiftMultiple extends React.Component {
   };
 
   handleChange = item => {
-    let { selectedItem } = this.state;
-    if (selectedItem.indexOf(item) === -1) {
-      for (let ind in suggestions) {
-        let el = suggestions[ind]
+    const {options} = this.props;
+    let { selectedItems } = this.state;
+    if (selectedItems.indexOf(item) === -1) {
+      for (let ind in options) {
+        let el = options[ind]
         if (el.id == item) {
-          selectedItem = [...selectedItem, el];
+          selectedItems = [...selectedItems, el];
           break;
         }
       }
@@ -121,28 +121,28 @@ class DownshiftMultiple extends React.Component {
 
     this.setState({
       inputValue: '',
-      selectedItem,
+      selectedItems,
     });
   };
 
   handleDelete = item => () => {
     this.setState(state => {
-      const selectedItem = [...state.selectedItem];
-      selectedItem.splice(selectedItem.indexOf(item), 1);
-      return { selectedItem };
+      const selectedItems = [...state.selectedItems];
+      selectedItems.splice(selectedItems.indexOf(item), 1);
+      return { selectedItems };
     });
   };
 
   render() {
     const { classes } = this.props;
-    const { inputValue, selectedItem } = this.state;
+    const { inputValue, selectedItems } = this.state;
 
     return (
       <Downshift
         id="downshift-multiple"
         inputValue={inputValue}
         onChange={this.handleChange}
-        selectedItem={selectedItem}
+        selectedItem={selectedItems}
       >
         {({
           getInputProps,
@@ -157,13 +157,15 @@ class DownshiftMultiple extends React.Component {
                 fullWidth: true,
                 classes,
                 InputProps: getInputProps({
-                  startAdornment: selectedItem.map(item => (
+                  startAdornment: selectedItems.map(item => (
                     <Chip
                       key={item.id}
                       tabIndex={-1}
                       label={item.label}
                       className={classes.chip}
                       onDelete={this.handleDelete(item.id)}
+                      variant="outlined"
+                      color="primary"
                     />
                   )),
                   onChange: this.handleInputChange,
@@ -196,6 +198,15 @@ DownshiftMultiple.propTypes = {
   classes: PropTypes.object.isRequired,
 };
 
+DownshiftMultiple.defaultProps = {
+  options: [
+    { label: 'Afghanistan', id: 1 },
+    { label: 'Aland Islands', id: 2 },
+    { label: 'Albania', id: 3 },
+    { label: 'Algeria', id: 4 },
+  ],
+};
+
 const styles = theme => ({
   root: {
     flexGrow: 1,