title: How do I use local state along with redux store state in the same react component?
body: <p>I have a table that displays contacts and I want to sort the contacts by first name. The contacts array comes from the redux store, which will come then come through the props, but I want the local state to hold how those contacts are sorted, since it's local UI state. How do I achieve this? I so far have placed contacts into <code>componentWillReceiveProps</code> but for some reason it doesn't receive the props when it changes. How do I update the local state each time the redux store state changes?</p>
  
  <pre><code>const Table = React.createClass({
    getInitialState () {
      return {contacts: []}
    },
    componentWillReceiveProps () {
      this.setState({ contacts: this.props.data.contacts})
    },
    sortContacts (parameter, e){
      ...
    },
    render () {
      return (
        &lt;table&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th onClick={this.sortContacts.bind(this, "firstName")}&gt;First Name&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            {contactRows}
          &lt;/tbody&gt;
        &lt;/table&gt;
      )
    }
  })
  </code></pre>
  
  <p><strong>update of current code that includes filtering</strong></p>
  
  <pre><code>import React, {Component} from 'react'
  import TableRow from './TableRow'
  
  class Table extends Component {
    constructor (props) {
      super(props)
      this.state = { sortBy: "fistName" }
    }
    sortContacts (parameter) {
      console.log('in sortContacts')
  
      this.setState({ sortBy: parameter })
    }
    sortedContacts () {
      console.log('in sortedContacts')
  
      const param = this.state.sortBy
      return (
        this.props.data.contacts.sort(function (a, b){
          if (!a.hasOwnProperty(param)){
            a[param] = " ";
          }
          if (!b.hasOwnProperty(param)){
            b[param] = " ";
          }
          const nameA = a[param].toLowerCase(), nameB = b[param].toLowerCase();
          if (nameA &gt; nameB) {
            return 1;
          } else {
            return -1;
          }
        })
      )
    }
    filteredSortedContacts () {
      console.log('in filteredSortedContacts')
  
      const filterText = this.props.data.filterText.toLowerCase()
      let filteredContacts = this.sortedContacts()
      if (filterText.length &gt; 0) {
        filteredContacts = filteredContacts.filter(function (contact){
          return (
            contact.hasOwnProperty('lastName') &amp;&amp;
            contact.lastName.toLowerCase().includes(filterText)
          )
        })
      }
      return filteredContacts
    }
    contactRows () {
      console.log('in contactRows')
      return this.filteredSortedContacts().map((contact, idx) =&gt;
        &lt;TableRow contact={contact} key={idx}/&gt;
      )
    }
    render () {
      return (
        &lt;div className="table-container"&gt;
          &lt;table className="table table-bordered"&gt;
            &lt;thead&gt;
              &lt;tr&gt;
                &lt;th className="th-cell" onClick={this.sortContacts.bind(this, "firstName")}&gt;First Name&lt;/th&gt;
                &lt;th onClick={this.sortContacts.bind(this, "lastName")}&gt;Last Name&lt;/th&gt;
                &lt;th&gt;Date of Birth&lt;/th&gt;
                &lt;th&gt;Phone&lt;/th&gt;
                &lt;th&gt;Email&lt;/th&gt;
                &lt;th&gt;Notes&lt;/th&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
              {this.contactRows()}
            &lt;/tbody&gt;
          &lt;/table&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default Table
  </code></pre>
  
  <p>The issue I'm seeing now is that <code>contactRows, filteredSortedContacts, sortedContacts</code> are being called multiple times, once for each TableRow. I don't see how this can be happening if I'm only calling <code>contactRows</code> once in the body.</p>