title: Getting TypeError: Cannot read property 'localeCompare' of undefined for my sortBy function in my React component and I'm not sure why
body: <p>I have a container component in my React project that houses two separate components. One component is a list of locations and the other is a filtering section for that list.</p>
  
  <p>The filter section dispatches an action up to the container and the container re orders the list based on the criteria and passes a final "filtered" list back to the locations list component.</p>
  
  <p>Right now the Sort By filter is a select dropdown with option values set to strings (as shown below), that are then passed up to the container. </p>
  
  <pre><code>&lt;SelectDropdown value={sort} onChange={handleSortChange}&gt;
    &lt;option value={''}&gt;Select&lt;/option&gt;
    &lt;option value={'alphaAsc'}&gt;Alphabetical Asc&lt;/option&gt;
    &lt;option value={'alphaDesc'}&gt;Alphabetical Desc&lt;/option&gt;
  &lt;/SelectDropdown&gt;
  </code></pre>
  
  <p>Inside the container I have a simple alphabetical sortBy function to sort and render the list in ascending or descending order based on the address value, and that's where my app keeps crashing and throwing the error <code>TypeError: Cannot read property 'localeCompare' of undefined</code> but I'm not entirely sure why.</p>
  
  <p>My original function is below along with the line where I'm using it.</p>
  
  <p><code>Alphabetical Sort function</code></p>
  
  <pre><code>export const alphabeticalSort = property =&gt; {
    let sortOrder = 1;
  
    if (property[0] === '-') {
      sortOrder = -1;
      property = property.substr(1);
    }
  
    return function(a, b) {
      if (sortOrder === -1) {
        return b[property].localeCompare(a[property]);
      } else {
        return a[property].localeCompare(b[property]);
      }
    };
  };
  </code></pre>
  
  <p><code>How I'm calling it</code></p>
  
  <pre><code>if (sort === 'alphaAsc') {
   filteredLocations = filteredLocations.sort(alphabeticalSort(l =&gt; l.address.addressLine1)).slice();
  }
  </code></pre>
  
  <p><code>Filtered Locations</code></p>
  
  <pre><code>const allLocations = store.get('locations');
  let filteredLocations = allLocations.slice();
  </code></pre>
  
  <p><code>Location Structure</code></p>
  
  <pre><code>locations: [
      {
        name: 'Fictional Place',
        address: {
                  addressLine1: '123 Imaginary Drive',
                  line2: '',
                  city: 'Philadelphia',
                  state: 'PA'
                  zip: '12345'
                 }
                ...
      },
      {
        name: 'California Dreaming',
        address: {
                  addressLine1: '456 Somewhere Blvd',
                  line2: '',
                  city: 'Sacramento',
                  state: 'CA'
                  zip: '67890'
                 }
               ...
      },
      ....
  </code></pre>