title: React Native Search using SectionList
body: <p>I created a <code>SectionList</code> and tried to implement a search filter for my <code>SectionList</code>. But my output got an error. I took a screenshot of it below. I don't know what's wrong.</p>
  
  <p>This is my component.</p>
  
  <pre><code>export default class Cluster1 extends Component{
   constructor(props){
  super(props)
  this.state = {
    dataToShow: '',
    search: false
  }
  } 
  searchUpdated = (term) =&gt; {
  let matchedItemsArray = []
  if(term === ''){
    this.setState({search: false, dataToShow: ClusterData})
  }else{
    this.state.dataToShow.map((item) =&gt; {
      if(item.title.includes(term)){
        matchedItemsArray.push(item)
      }
    })
    this.setState({search: true, dataToShow: matchedItemsArray})
  }
  }
  searchUpdated = (input) =&gt; {
    let userInput =[]
  if(input === ''){
    this.setState({search: false})
    userInput = ''
  }else{
    this.setState({search: true})
  }
  }
  render(){       
   return(        
       &lt;View style={styles.container}&gt;         
      &lt;TextInput 
        onChangeText={(term) =&gt; { this.searchUpdated(text) }} 
        style={styles.searchInput}
        placeholder="Type a mood to search"
        /&gt;        
        &lt;SectionList
            renderItem = {({item, index}) =&gt; 
             &lt;SectionListItem item = {item} index = {index}/&gt;}
            renderSectionHeader = {({section}) =&gt; 
           &lt;SectionHeader 
  
              sections={this.searchUpdated()}
             keyExtractor = {(item) =&gt; item.name}/&gt;}&gt;
            &lt;/SectionList&gt;     &lt;/View&gt;
   );
   }} 
  
  class SectionHeader extends Component {
   render() {        
       return (            
           &lt;View style={styles.header}&gt;  
               &lt;Text style={styles.headertext}&gt;
               {this.props.section.title}       
               &lt;/Text&gt;
               &lt;TouchableOpacity onPress={ () =&gt; Actions.SongList({ section: this.props.section}) }&gt;
                 &lt;Text style ={styles.Play}&gt; Play
                 &lt;/Text&gt;
                 &lt;/TouchableOpacity&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</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/K3KLK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/K3KLK.png" alt="enter image description here"></a></p>