diff --git a/wagtailmodelchoosers/client/components/AutoComplete.js b/wagtailmodelchoosers/client/components/AutoComplete.js
index 693c2aa..3b8c8bd 100644
--- a/wagtailmodelchoosers/client/components/AutoComplete.js
+++ b/wagtailmodelchoosers/client/components/AutoComplete.js
@@ -30,6 +30,22 @@ class AutoComplete extends Component {
     this.onChange = this.onChange.bind(this);
   }
 
+  onSuggestionsUpdateRequested({ value }) {
+    const { onLoadStart } = this.props;
+    onLoadStart();
+    this.loadSuggestions(value);
+  }
+
+  onChange(event, { newValue }) {
+    const { onChange } = this.props;
+
+    this.setState({
+      value: newValue,
+    }, () => {
+      onChange(newValue);
+    });
+  }
+
   loadSuggestions(suggestionValue) {
     const { filter, endpoint, onLoadSuggestions } = this.props;
     const url = `${endpoint}/?search=${suggestionValue}${filter}`;
@@ -38,7 +54,7 @@ class AutoComplete extends Component {
       credentials: 'same-origin',
     })
       .then(res => res.json())
-      .then(json => {
+      .then((json) => {
         this.setState({
           suggestions: json.results,
           loading: false,
@@ -48,22 +64,6 @@ class AutoComplete extends Component {
       });
   }
 
-  onSuggestionsUpdateRequested({ value }) {
-    const { onLoadStart } = this.props;
-    onLoadStart();
-    this.loadSuggestions(value);
-  }
-
-  onChange(event, { newValue }) {
-    const { onChange } = this.props;
-
-    this.setState({
-      value: newValue,
-    }, () => {
-      onChange(newValue);
-    });
-  }
-
   render() {
     const { value, suggestions } = this.state;
 
@@ -76,7 +76,7 @@ class AutoComplete extends Component {
           renderSuggestion={renderSuggestion}
           inputProps={{
             placeholder: 'Type to search',
-            value: value,
+            value,
             onChange: this.onChange,
           }}
         />
diff --git a/wagtailmodelchoosers/client/components/BaseChooser.js b/wagtailmodelchoosers/client/components/BaseChooser.js
index ceddf67..df04d56 100644
--- a/wagtailmodelchoosers/client/components/BaseChooser.js
+++ b/wagtailmodelchoosers/client/components/BaseChooser.js
@@ -13,23 +13,26 @@ const STR = {
 const defaultProps = {
   display: 'title',
   filters: [],
-  pk_name: 'uuid',
   translations: {},
+  pk_name: 'uuid',
+  page_size: 10,
+  page_size_param: 'page_size',
 };
 
 const propTypes = {
   initialValue: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
   updateInputValue: PropTypes.func.isRequired,
-  label: PropTypes.string.isRequired,
   initial_display_value: PropTypes.string.isRequired,
-  endpoint: PropTypes.string.isRequired,
-  value: PropTypes.any,
   required: PropTypes.bool.isRequired,
   display: PropTypes.oneOfType([PropTypes.string, PropTypes.array]).isRequired,
-  list_display: PropTypes.array.isRequired,
-  filters: PropTypes.array,
   pk_name: PropTypes.string,
   translations: PropTypes.object,
+  label: PropTypes.string.isRequired,
+  list_display: PropTypes.array.isRequired,
+  filters: PropTypes.array,
+  endpoint: PropTypes.string.isRequired,
+  page_size: PropTypes.number,
+  page_size_param: PropTypes.string,
 };
 
 class BaseChooser extends React.Component {
@@ -53,8 +56,8 @@ class BaseChooser extends React.Component {
 
     this.state = {
       pickerVisible: false,
-      selectedId: selectedId,
-      selectedItem: selectedItem,
+      selectedId,
+      selectedItem,
       initialUrl: null,
     };
 
@@ -68,12 +71,6 @@ class BaseChooser extends React.Component {
     this.clearPicker = this.clearPicker.bind(this);
   }
 
-  showPicker() {
-    this.setState({
-      pickerVisible: true,
-    });
-  }
-
   onClose() {
     this.setState({
       pickerVisible: false,
@@ -94,7 +91,7 @@ class BaseChooser extends React.Component {
   getItemPk(item) {
     const { pk_name: pkName } = this.props;
 
-    return !!item ? item[pkName] : null;
+    return item ? item[pkName] : null;
   }
 
   getItemPreview() {
@@ -107,7 +104,9 @@ class BaseChooser extends React.Component {
 
     // Return first non-empty field if `display` is an Array.
     if (Array.isArray(display)) {
-      for (const fieldName of display) {
+      let i;
+      for (i = 0; i < display.length; i + 1) {
+        const fieldName = display[i];
         if (fieldName in selectedItem && selectedItem[fieldName]) {
           return selectedItem[fieldName];
         }
@@ -123,11 +122,6 @@ class BaseChooser extends React.Component {
     return this.getItemPk(selectedItem);
   }
 
-  isOptional() {
-    const { required } = this.props;
-    return !required;
-  }
-
   getChooseButtons() {
     const { translations } = this.props;
     const { selectedId } = this.state;
@@ -157,6 +151,17 @@ class BaseChooser extends React.Component {
     );
   }
 
+  isOptional() {
+    const { required } = this.props;
+    return !required;
+  }
+
+  showPicker() {
+    this.setState({
+      pickerVisible: true,
+    });
+  }
+
   clearPicker(e) {
     e.preventDefault();
 
@@ -172,6 +177,16 @@ class BaseChooser extends React.Component {
 
   render() {
     const { pickerVisible, initialUrl } = this.state;
+    const {
+      list_display: listDisplay,
+      label,
+      endpoint,
+      filters,
+      pk_name: pkName,
+      page_size: pageSize,
+      page_size_param: pageSizeParam,
+      translations,
+    } = this.props;
 
     return (
       <div>
@@ -186,7 +201,14 @@ class BaseChooser extends React.Component {
             url={initialUrl}
             onClose={this.onClose}
             onSelect={this.onSelect}
-            {...this.props}
+            label={label}
+            endpoint={endpoint}
+            filters={filters}
+            list_display={listDisplay}
+            pk_name={pkName}
+            page_size={pageSize}
+            page_size_param={pageSizeParam}
+            translations={translations}
           />
         ) : null}
       </div>
diff --git a/wagtailmodelchoosers/client/components/Buttons.js b/wagtailmodelchoosers/client/components/Buttons.js
index ca8fb5b..a411919 100644
--- a/wagtailmodelchoosers/client/components/Buttons.js
+++ b/wagtailmodelchoosers/client/components/Buttons.js
@@ -27,7 +27,7 @@ Button.defaultProps = {
 
 Button.propTypes = {
   isActive: PropTypes.bool,
-  classes: PropTypes.array,
+  classes: PropTypes.arrayOf(PropTypes.string),
   label: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,
 };
diff --git a/wagtailmodelchoosers/client/components/ModelChooser.js b/wagtailmodelchoosers/client/components/ModelChooser.js
index 7143c26..9d12f33 100644
--- a/wagtailmodelchoosers/client/components/ModelChooser.js
+++ b/wagtailmodelchoosers/client/components/ModelChooser.js
@@ -30,23 +30,25 @@ class ModelChooser extends React.Component {
 
     // TODO: Props mutation WTF?
     input.value = newValue;
-    }
+  }
 
-    render() {
-      const { options, input } = this.props;
+  render() {
+    const { options, input } = this.props;
 
-      return (
-        <BaseChooser
-          initialValue={input.value}
-          updateInputValue={this.updateInputValue}
-          {...options}
-        />
-      );
+    return (
+      <BaseChooser
+        initialValue={input.value}
+        updateInputValue={this.updateInputValue}
+        {...options}
+      />
+    );
   }
 }
 
 ModelChooser.propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
   options: PropTypes.object.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
   input: PropTypes.object.isRequired,
 };
 
diff --git a/wagtailmodelchoosers/client/components/ModelPicker.js b/wagtailmodelchoosers/client/components/ModelPicker.js
index 6c260ff..d4cb592 100644
--- a/wagtailmodelchoosers/client/components/ModelPicker.js
+++ b/wagtailmodelchoosers/client/components/ModelPicker.js
@@ -19,9 +19,7 @@ const STR = {
 };
 
 const defaultProps = {
-  display: 'title',
   filters: [],
-  pk_name: 'uuid',
   page_size: 10,
   page_size_param: 'page_size',
   translations: {},
@@ -32,9 +30,6 @@ const propTypes = {
   onClose: PropTypes.func.isRequired,
   label: PropTypes.string.isRequired,
   endpoint: PropTypes.string.isRequired,
-  value: PropTypes.any,
-  required: PropTypes.bool.isRequired,
-  display: PropTypes.oneOfType([PropTypes.string, PropTypes.array]).isRequired,
   list_display: PropTypes.array.isRequired,
   filters: PropTypes.array,
   pk_name: PropTypes.string.isRequired,
@@ -90,11 +85,6 @@ class ModelPicker extends React.Component {
     this.onLoadStart = this.onLoadStart.bind(this);
   }
 
-  getDefaultUrl() {
-    const { endpoint, page_size: pageSize, page_size_param: pageSizeParam } = this.props;
-    return `${endpoint}/?${pageSizeParam}=${pageSize}`;
-  }
-
   componentDidMount() {
     setTimeout(() => {
       this.navigate(this.getDefaultUrl());
@@ -109,178 +99,98 @@ class ModelPicker extends React.Component {
     document.body.style.width = '';
   }
 
-  getPk(item) {
-    const { pk_name } = this.props;
-
-    return !!item ? item[pk_name] : null;
-  }
-
-  getModels() {
-    const { shouldShowSuggestions, suggestions, models } = this.state;
-
-    return shouldShowSuggestions ? suggestions : models;
-  }
-
-  select(pk) {
-    const { onSelect } = this.props;
-    const { url } = this.state;
-    const models = this.getModels();
-    const item = models.find(m => this.getPk(m) === pk);
-
+  onClose(e) {
+    const { onClose } = this.props;
     this.closeWithCallback(() => {
-      onSelect(this.getPk(item), item, url);
+      onClose(e);
     });
   }
 
-  closeWithCallback(callback) {
-    this.elRef.classList.add(MODAL_EXIT_CLASS);
-    setTimeout(callback, MODAL_CLOSE_TIMEOUT);
-  }
-
-  update(json) {
-    const { page_size: pageSize } = this.props;
-
-    // If the API does not return the total number of page,
-    // try to calculate it from the number of result and the page size.
-    let numPage = 0;
-    if (json.num_pages) {
-      numPage = json.num_pages;
-    } else if (json.count) {
-      numPage = Math.ceil(json.count / pageSize);
-    }
-
+  onLoadSuggestions(suggestions) {
     this.setState({
-      numPages: numPage,
-      page: json.page,
-      models: json.results,
-      count: json.count,
-      next: json.next,
-      previous: json.previous,
-      loading: false,
-    }, () => {
-      this.contentRef.scrollTop = 0;
+      suggestions,
+      suggestionsCount: suggestions.length,
+      loadingSuggestions: false,
     });
   }
 
-  addFilterParams(url) {
-    const { filters } = this.props;
-    let localUrl = url;
-
-    if (filters) {
-      // TODO Redo with map and join.
-      filters.forEach((filter) => {
-        localUrl += `&${filter.field}=${filter.value}`;
-      });
-    }
-
-    return localUrl;
-  }
+  onValueChange(newValue) {
+    const shouldShowSuggestions = newValue.trim().length > 2;
 
-  navigate(url) {
-    const urlWithFilters = this.addFilterParams(url);
     this.setState({
-      loading: true,
-      url: url,
-    }, () => {
-      // TODO There is no reason for this code to be in the setState callback.
-      // TODO This is not producing errors when status code is not 200,
-      // so the error handling likely does not work.
-      // TODO Use fetch API wrapper.
-      fetch(urlWithFilters, {
-        credentials: 'same-origin',
-      })
-        .then(res => res.json())
-        .then(this.update, this.handleError);
+      shouldShowSuggestions,
     });
   }
 
-  onClose(e) {
-    const { onClose } = this.props;
-    this.closeWithCallback(() => {
-      onClose(e);
-    });
-  }
-
-  handleError() {
+  onLoadStart() {
     this.setState({
-      loading: false,
+      loadingSuggestions: true,
     });
   }
 
-  getPlaceholder() {
-    const { list_display: listDisplay } = this.props;
-    const { loading } = this.state;
-
-    return (
-      <tr className="chooser__item">
-        <td colSpan={listDisplay.length} className="chooser__cell chooser__cell--disabled">
-          {loading ? 'Loading' : 'Sorry, no results'}
-        </td>
-      </tr>
-    );
-  }
-
-  getTable() {
-    const { list_display: listDisplay } = this.props;
-    const models = this.getModels();
+  getPaginationButtons() {
+    const { translations } = this.props;
+    const { next, previous, shouldShowSuggestions } = this.state;
 
-    return (
-      <table className="chooser-table">
-        <thead>
-        <tr>
-          {listDisplay.map(this.getHeader)}
-        </tr>
-        </thead>
-        <tbody>
-        {models.length ? models.map(this.getRow) : this.getPlaceholder()}
-        </tbody>
-      </table>
-    );
-  }
+    const prevLabel = tr(STR, translations, 'previous');
+    const nextLabel = tr(STR, translations, 'next');
+    const prevEnabled = shouldShowSuggestions ? false : !!previous;
+    const nextEnabled = shouldShowSuggestions ? false : !!next;
 
-  getHeader(field) {
     return (
-      <td key={field.name}>
-        {field.label}
-      </td>
+      <span>
+        <Button
+          onClick={this.navigatePrevious}
+          isActive={prevEnabled}
+          label={prevLabel}
+        />
+        <Button
+          onClick={this.navigateNext}
+          isActive={nextEnabled}
+          label={nextLabel}
+        />
+      </span>
     );
   }
 
-  parseValue(value, fieldName) {
-    const type = typeof value;
-
-    if (type === 'string') {
-      return value;
-    }
+  getPageDisplay() {
+    const { translations } = this.props;
+    const { numPages, page: currentPage, shouldShowSuggestions } = this.state;
 
-    if (type === 'number') {
-      return value;
+    let text;
+    if (shouldShowSuggestions) {
+      const label = tr(STR, translations, 'page');
+      text = `1 / 1 ${label}`;
+    } else {
+      const label = pluralize(STR, translations, 'result', 'results', numPages);
+      text = `${currentPage} / ${numPages} ${label}`;
     }
 
-    if (type === 'object') {
-      // Django internals
-      if (fieldName === 'content_type') {
-        return value.model;
-      }
-    }
+    return <span className="admin-modal__pagination">{text}</span>;
+  }
 
-    if (type === 'boolean') {
-      return value ? 'True' : 'False';
-    }
+  getCountDisplay() {
+    const { translations } = this.props;
+    const count = this.getCount();
+    const label = pluralize(STR, translations, 'result', 'results', count);
 
-    return '';
+    return (
+      <span className="admin-modal__results">
+        {count} {label}
+      </span>
+    );
   }
 
   getRow(item) {
     const { list_display: listDisplay } = this.props;
 
-    return (
+    return ( // eslint-disable-next-line
       <tr
         key={this.getPk(item)}
         className="chooser__item"
         onClick={() => this.select(this.getPk(item))}
       >
-        {listDisplay.map(field => {
+        {listDisplay.map((field) => {
           const value = item[field.name];
 
           return (
@@ -299,103 +209,190 @@ class ModelPicker extends React.Component {
     return shouldShowSuggestions ? suggestionsCount : count;
   }
 
-  getCountDisplay() {
-    const { translations } = this.props;
-    const count = this.getCount();
-    const label = pluralize(STR, translations, 'result', 'results', count);
+  // eslint-disable-next-line
+  getHeader(field) {
+    return (
+      <td key={field.name}>
+        {field.label}
+      </td>
+    );
+  }
+
+  getTable() {
+    const { list_display: listDisplay } = this.props;
+    const models = this.getModels();
 
     return (
-      <span className="admin-modal__results">
-        {count} {label}
-      </span>
+      <table className="chooser-table">
+        <thead>
+          <tr>
+            {listDisplay.map(this.getHeader)}
+          </tr>
+        </thead>
+        <tbody>
+          {models.length ? models.map(this.getRow) : this.getPlaceholder()}
+        </tbody>
+      </table>
     );
   }
 
-  getPageDisplay() {
-    const { translations } = this.props;
-    const { numPages, page: currentPage, shouldShowSuggestions } = this.state;
+  getPlaceholder() {
+    const { list_display: listDisplay } = this.props;
+    const { loading } = this.state;
 
-    let text;
-    if (shouldShowSuggestions) {
-      const label = tr(STR, translations, 'page');
-      text = `1 / 1 ${label}`;
-    } else {
-      const label = pluralize(STR, translations, 'result', 'results', numPages);
-      text = `${currentPage} / ${numPages} ${label}`;
-    }
+    return (
+      <tr className="chooser__item">
+        <td colSpan={listDisplay.length} className="chooser__cell chooser__cell--disabled">
+          {loading ? 'Loading' : 'Sorry, no results'}
+        </td>
+      </tr>
+    );
+  }
 
-    return <span className="admin-modal__pagination">{text}</span>;
+  getModels() {
+    const { shouldShowSuggestions, suggestions, models } = this.state;
+
+    return shouldShowSuggestions ? suggestions : models;
   }
 
-  getPaginationButtons() {
-    const { translations } = this.props;
-    const { next, previous, shouldShowSuggestions } = this.state;
+  getPk(item) {
+    const { pk_name } = this.props;
 
-    const prevLabel = tr(STR, translations, 'previous');
-    const nextLabel = tr(STR, translations, 'next');
-    const prevEnabled = shouldShowSuggestions ? false : !!previous;
-    const nextEnabled = shouldShowSuggestions ? false : !!next;
+    return item ? item[pk_name] : null;
+  }
 
-    return (
-      <span>
-        <Button
-          onClick={this.navigatePrevious}
-          isActive={prevEnabled}
-          label={prevLabel}
-        />
-        <Button
-          onClick={this.navigateNext}
-          isActive={nextEnabled}
-          label={nextLabel}
-        />
-      </span>
-    );
+  getDefaultUrl() {
+    const { endpoint, page_size: pageSize, page_size_param: pageSizeParam } = this.props;
+    return `${endpoint}/?${pageSizeParam}=${pageSize}`;
   }
 
-  navigatePrevious() {
+  select(pk) {
+    const { onSelect } = this.props;
+    const { url } = this.state;
+    const models = this.getModels();
+    const item = models.find(m => this.getPk(m) === pk);
+
+    this.closeWithCallback(() => {
+      onSelect(this.getPk(item), item, url);
+    });
+  }
+
+  navigateNext() {
     const { shouldShowSuggestions, page } = this.state;
 
     if (shouldShowSuggestions) {
       return;
     }
 
-    const url = `${this.getDefaultUrl()}&page=${page - 1}`;
+    const url = `${this.getDefaultUrl()}&page=${page + 1}`;
     this.navigate(url);
   }
 
-  navigateNext() {
+  navigatePrevious() {
     const { shouldShowSuggestions, page } = this.state;
 
     if (shouldShowSuggestions) {
       return;
     }
 
-    const url = `${this.getDefaultUrl()}&page=${page + 1}`;
+    const url = `${this.getDefaultUrl()}&page=${page - 1}`;
     this.navigate(url);
   }
 
-  onLoadSuggestions(suggestions) {
+  // eslint-disable-next-line
+  parseValue(value, fieldName) {
+    const type = typeof value;
+
+    if (type === 'string') {
+      return value;
+    }
+
+    if (type === 'number') {
+      return value;
+    }
+
+    if (type === 'object') {
+      // Django internals
+      if (fieldName === 'content_type') {
+        return value.model;
+      }
+    }
+
+    if (type === 'boolean') {
+      return value ? 'True' : 'False';
+    }
+
+    return '';
+  }
+
+  handleError() {
     this.setState({
-      suggestions: suggestions,
-      suggestionsCount: suggestions.length,
-      loadingSuggestions: false,
+      loading: false,
     });
   }
 
-  onValueChange(newValue) {
-    const shouldShowSuggestions = newValue.trim().length > 2;
-
+  navigate(url) {
+    const urlWithFilters = this.addFilterParams(url);
     this.setState({
-      shouldShowSuggestions: shouldShowSuggestions,
+      loading: true,
+      url,
+    }, () => {
+      // TODO There is no reason for this code to be in the setState callback.
+      // TODO This is not producing errors when status code is not 200,
+      // so the error handling likely does not work.
+      // TODO Use fetch API wrapper.
+      fetch(urlWithFilters, {
+        credentials: 'same-origin',
+      })
+        .then(res => res.json())
+        .then(this.update, this.handleError);
     });
   }
 
-  onLoadStart() {
+  addFilterParams(url) {
+    const { filters } = this.props;
+    let localUrl = url;
+
+    if (filters) {
+      // TODO Redo with map and join.
+      filters.forEach((filter) => {
+        localUrl += `&${filter.field}=${filter.value}`;
+      });
+    }
+
+    return localUrl;
+  }
+
+  update(json) {
+    const { page_size: pageSize } = this.props;
+
+    // If the API does not return the total number of page,
+    // try to calculate it from the number of result and the page size.
+    let numPage = 0;
+    if (json.num_pages) {
+      numPage = json.num_pages;
+    } else if (json.count) {
+      numPage = Math.ceil(json.count / pageSize);
+    }
+
     this.setState({
-      loadingSuggestions: true,
+      numPages: numPage,
+      page: json.page,
+      models: json.results,
+      count: json.count,
+      next: json.next,
+      previous: json.previous,
+      loading: false,
+    }, () => {
+      this.contentRef.scrollTop = 0;
     });
   }
 
+  closeWithCallback(callback) {
+    this.elRef.classList.add(MODAL_EXIT_CLASS);
+    setTimeout(callback, MODAL_CLOSE_TIMEOUT);
+  }
+
   render() {
     const { endpoint, label, translations } = this.props;
     const chooseHeading = tr(STR, translations, 'choose');
diff --git a/wagtailmodelchoosers/client/components/RemoteModelChooser.js b/wagtailmodelchoosers/client/components/RemoteModelChooser.js
index bddf5b5..833f12a 100644
--- a/wagtailmodelchoosers/client/components/RemoteModelChooser.js
+++ b/wagtailmodelchoosers/client/components/RemoteModelChooser.js
@@ -16,19 +16,16 @@ class RemoteModelChooser extends React.Component {
     if (item === null) {
       // Null state
       newValue = null;
+    } else if (fieldsToSave) {
+      // Create a new object with only the fields to save
+      const clone = {};
+      fieldsToSave.forEach((field) => {
+        clone[field] = item[field];
+      });
+      newValue = JSON.stringify(clone);
     } else {
-      // Object
-      if (fieldsToSave) {
-        // Create a new object with only the fields to save
-        const clone = {};
-        fieldsToSave.forEach((field) => {
-          clone[field] = item[field];
-        });
-        newValue = JSON.stringify(clone);
-      } else {
-        // Use the whole object.
-        newValue = JSON.stringify(item);
-      }
+      // Use the whole object.
+      newValue = JSON.stringify(item);
     }
 
     // TODO: Props mutation WTF?
@@ -56,7 +53,9 @@ class RemoteModelChooser extends React.Component {
 }
 
 RemoteModelChooser.propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
   options: PropTypes.object.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
   input: PropTypes.object.isRequired,
 };
 
diff --git a/wagtailmodelchoosers/client/sources/ModelSource.js b/wagtailmodelchoosers/client/sources/ModelSource.js
index c65c30b..e04e729 100644
--- a/wagtailmodelchoosers/client/sources/ModelSource.js
+++ b/wagtailmodelchoosers/client/sources/ModelSource.js
@@ -34,7 +34,9 @@ class ModelSource extends React.Component {
       entityMutability = 'MUTABLE';
     } else {
       if (Array.isArray(display)) {
-        for (const fieldName of display) {
+        let i;
+        for (i = 0; i < display.length; i + 1) {
+          const fieldName = display[i];
           if (fieldName in data && data[fieldName]) {
             label = data[fieldName];
             break;
@@ -50,9 +52,9 @@ class ModelSource extends React.Component {
       entityMutability = 'IMMUTABLE';
     }
     const nextData = {
-      id: id,
-      label: label,
-      content_type: content_type,
+      id,
+      label,
+      content_type,
     };
 
     const nextState = DraftUtils.createEntity(
@@ -60,7 +62,7 @@ class ModelSource extends React.Component {
       type,
       nextData,
       nextData.label,
-      entityMutability
+      entityMutability,
     );
 
     onUpdate(nextState);
@@ -86,11 +88,18 @@ class ModelSource extends React.Component {
 }
 
 ModelSource.propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
   editorState: PropTypes.object.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
   options: PropTypes.object.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
   entity: PropTypes.object,
   onClose: PropTypes.func.isRequired,
   onUpdate: PropTypes.func.isRequired,
 };
 
+ModelSource.defaultProps = {
+  entity: {},
+};
+
 export default ModelSource;
diff --git a/wagtailmodelchoosers/client/sources/RemoteModelSource.js b/wagtailmodelchoosers/client/sources/RemoteModelSource.js
index 54b1bb6..22735e0 100644
--- a/wagtailmodelchoosers/client/sources/RemoteModelSource.js
+++ b/wagtailmodelchoosers/client/sources/RemoteModelSource.js
@@ -35,7 +35,9 @@ class RemoteModelSource extends React.Component {
       entityMutability = 'MUTABLE';
     } else {
       if (Array.isArray(display)) {
-        for (const fieldName of display) {
+        let i;
+        for (i = 0; i < display.length; i + 1) {
+          const fieldName = display[i];
           if (fieldName in data && data[fieldName]) {
             label = data[fieldName];
             break;
@@ -65,8 +67,8 @@ class RemoteModelSource extends React.Component {
     }
 
     const nextData = Object.assign({}, itemData, {
-      id: id,
-      label: label,
+      id,
+      label,
     });
 
     const nextState = DraftUtils.createEntity(
@@ -74,7 +76,7 @@ class RemoteModelSource extends React.Component {
       type,
       nextData,
       nextData.label,
-      entityMutability
+      entityMutability,
     );
 
     onUpdate(nextState);
@@ -100,11 +102,18 @@ class RemoteModelSource extends React.Component {
 }
 
 RemoteModelSource.propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
   editorState: PropTypes.object.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
   options: PropTypes.object.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
   entity: PropTypes.object,
   onUpdate: PropTypes.func.isRequired,
   onClose: PropTypes.func.isRequired,
 };
 
+RemoteModelSource.defaultProps = {
+  entity: {},
+};
+
 export default RemoteModelSource;
diff --git a/wagtailmodelchoosers/client/utils.js b/wagtailmodelchoosers/client/utils.js
index 5103658..94db5e4 100644
--- a/wagtailmodelchoosers/client/utils.js
+++ b/wagtailmodelchoosers/client/utils.js
@@ -12,7 +12,13 @@ export const tr = (defaultTranslations, customTranslations, key) => {
   return key.replace(/_/g, ' ');
 };
 
-export const pluralize = (defaultTranslations, customTranslations, singularKey, pluralKey, count) => {
+export const pluralize = (
+  defaultTranslations,
+  customTranslations,
+  singularKey,
+  pluralKey,
+  count,
+) => {
   const singular = tr(defaultTranslations, customTranslations, singularKey);
   const plural = tr(defaultTranslations, customTranslations, pluralKey);
 
diff --git a/wagtailmodelchoosers/client/wagtailmodelchoosers.js b/wagtailmodelchoosers/client/wagtailmodelchoosers.js
index 2faab1d..e100e61 100644
--- a/wagtailmodelchoosers/client/wagtailmodelchoosers.js
+++ b/wagtailmodelchoosers/client/wagtailmodelchoosers.js
@@ -35,8 +35,8 @@ window.wagtailModelChoosers.initModelChooser = initModelChooser;
 window.wagtailModelChoosers.initRemoteModelChooser = initRemoteModelChooser;
 
 // Add Sources if WagtailDraftail is available.
-if (window.hasOwnProperty('wagtailDraftail')) {
-  window.wagtailDraftail.registerSources({ ModelSource, RemoteModelSource })
+if (Object.prototype.hasOwnProperty.call(window, 'wagtailDraftail')) {
+  window.wagtailDraftail.registerSources({ ModelSource, RemoteModelSource });
 }
 
 export default ModelChooser;
diff --git a/wagtailmodelchoosers/client/wagtailmodelchoosers.test.js b/wagtailmodelchoosers/client/wagtailmodelchoosers.test.js
index d6bb8ca..577ad07 100644
--- a/wagtailmodelchoosers/client/wagtailmodelchoosers.test.js
+++ b/wagtailmodelchoosers/client/wagtailmodelchoosers.test.js
@@ -1,3 +1,4 @@
+/* eslint-disable */
 import ModelChooser, { BaseChooser, ModelPicker, initModelChooser } from './wagtailmodelchoosers';
 
 describe('wagtailmodelchooser', () => {