title: React Native Search Filter SectionList
body: <p>I want to create a search filter for my <code>SectionList</code> but I can't seem to be able to do it. I created a <code>SectionList</code> which shows the clusters with different data. I want to search like <code>sweet</code> or <code>fun</code> from cluster2 but it doesn't work. Below is my code. Would appreciate it if someone can help me or provide an alternate solution to search.</p>
  
  <p>This is my Clusters component</p>
  
  <pre><code>const KEYS_TO_FILTERS = ['data'];
  import {ClusterData} from '../data/ClusterData';
  
  export default class Cluster1 extends Component{
  constructor(props) {
      super(props);
      this.state = {
        searchTerm: ''
      }
    }
    searchUpdated(term) {
      this.setState({ searchTerm: term })
    }
  render(){
      const filteredMoods = ClusterData.filter(createFilter(this.state.searchTerm, KEYS_TO_FILTERS))
   return(
       &lt;View style={styles.container}&gt;
      &lt;SearchInput 
        onChangeText={(term) =&gt; { this.searchUpdated(term) }} 
        style={styles.searchInput}
        placeholder="Type a mood to search"
        /&gt;
           &lt;SectionList  
  
            renderItem={({item,index})=&gt;{
                return(
               &lt;SectionListItem  item={item} index={index}&gt; &lt;/SectionListItem&gt;);}} 
                         sections={ClusterData}
                         keyExtractor={(item, index) =&gt; item.name}&gt;
           &lt;/SectionList&gt;
       &lt;/View&gt;      
   );
   }}    
   class SectionListItem extends Component{
   render(){
       return(
           &lt;View&gt;
           &lt;Text style={styles.moodname}&gt;{this.props.item.name}&lt;/Text&gt;
           &lt;/View&gt;
       );
   }
   }
  </code></pre>
  
  <p>This is my data component</p>
  
  <pre><code>const ClusterData = [
  { title: 'Cluster1', 
  data: 
  [
    {name: 'passionate'},
    {name: 'rousing'},
    {name: 'confident'},
    {name: 'boisterous'},
    {name: 'rowdy'}
  ],
  },
  { title: 'Cluster2', 
    data: 
  [
    {name: 'rollicking'},
    {name: 'cheerful'},
    {name: 'fun'},
    {name: 'sweet'},
    {name: 'amiable'},
    {name: 'natured'}
  ],
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/NazMZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NazMZ.png" alt="enter image description here"></a></p>