title: Sort and Filter an object to show a Alphabetical list just like contacts in ReactJS
body: <p>I need to sort and filter an object as shown below...</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const companyList = {
    'A': ['apple','amazon','abiz','axios'],
    'B': ['bazinga','bob','biscount'],
    'C': ['Caterpillar','CastJ'],
  };</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now i need the result to be sorted like</p>
  
  <h2><strong>A</strong></h2>
  
  <p>apple, amazon, abiz, axios</p>
  
  <h2><strong>B</strong></h2>
  
  <p>bazinga, bob, biscount</p>
  
  <h2><strong>C</strong></h2>
  
  <p>caterpillar, castJ</p>
  
  <p>and so on...
  plus i need filtering as I search through the list</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import react,{PropTypes} from 'react';
  import ReactDOM from 'react-dom';
  
  const fruits = {
    'A': ['apple','amazon','abiz','axios'],
    'B': ['bazinga','bob','biscount'],
    'C': ['Caterpillar','CastJ'],
  };
  
  const fruitFilter = filter =&gt; fruit =&gt; fruit.toLowerCase().indexOf(filter.toLowerCase()) !== -1;
  
  const Item = React.createClass({
    propTypes: {
      item: PropTypes.string.isRequired
    },
    render() {
      return &lt;span&gt;&lt;li&gt;{this.props.item}&lt;/li&gt;&lt;/span&gt;;
    }
  });
  
  const ListContent = React.createClass({
    propTypes: {
      items: PropTypes.arrayOf(PropTypes.string).isRequired
    },
    render() {
      const Items = this.props.items.map(item =&gt; &lt;Item key={item} item={item} &gt;&lt;/Item&gt;);
  
      return &lt;ul className="sort-advfilter-list-ul-div"&gt;{Items}&lt;/ul&gt;;
    }
  });
  
  const AdvFilter = React.createClass({
    getInitialState: function() {
      return {
        filter: '',
      }
    },
    render: function() {
      let filteredFruits;
      let fru = [];
      for (var p in fruits) {
        if (fruits.hasOwnProperty(p)) {
          Array.prototype.push.apply(fru,fruits[p]);
  
          filteredFruits = this.state.filter ?
            fru.filter(fruitFilter(this.state.filter)) :
            fru;
          console.log(p + " " + fruits[p]);
        }
      }
  
    return (&lt;div className="sort-advfilter-scroll-div"&gt;
        &lt;TextFilter onFilter={ ({target: {value: filter}} ) =&gt; this.setState({filter})}/&gt;
        &lt;ListContent items={filteredFruits}/&gt;
      &lt;/div&gt;
      )
    }
  });
  ReactDOM.render(&lt;AdvFilter /&gt;,document.getElementById('root'));</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"&gt;&lt;/script&gt;
  &lt;div id="root"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>