title: iam facing a error to searchbar in reactjs code
body: <p>Here is my js file</p>
  
  <pre><code>       constructor(props) {
          super(props);
          this.state = {
            query: "",
            countries: [],
            searchString:[]
  
          }
        }
  
        handleInputChange = (event) =&gt; {
          this.setState({
              query: event.target.value
          },()=&gt;{
        this.filterArray();
      })
  
      }
        componentDidMount() {
          const apiUrl = 'https://indian-cities-api-nocbegfhqg.now.sh/cities';
          fetch(apiUrl)
            .then(res =&gt; res.json())
            .then(
              (result) =&gt; {
  
                this.setState({
                  countries: result,
                  searchString:result
                });
  
              },
              console.log("hello",this.state.countries)
              // (error) =&gt; {
              //   this.setState({ error });
              // }
            )
        }
        filterArray = () =&gt; {
          let searchString = this.state.query;
          let result = this.state.countries;
  
  
          if(searchString.length &gt; 0){
            // console.log(responseData[i].name);
            result = result.filter(searchString);
      this.setState({
        result
      })
        }
  
      }
  
        render() {
          const { countries} = this.state;
  
          console.log("country",this.state)
            return(
              &lt;div&gt;
                &lt;h2&gt;countrie List&lt;/h2&gt;
                &lt;form&gt;
                      &lt;input type="text" id="filter" placeholder="Search for..."  onChange={this.handleInputChange}/&gt;
                  &lt;/form&gt;
                &lt;Table&gt;
                  &lt;thead&gt;
                    &lt;tr&gt;
                      &lt;th&gt;#ID&lt;/th&gt;
                      &lt;th&gt;countrie Name&lt;/th&gt;
                      &lt;th&gt;Code&lt;/th&gt;
                      &lt;th&gt;States&lt;/th&gt;
                    &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                    {countries.map(countrie =&gt; (
                      &lt;tr key={countrie.City}&gt;
                        &lt;td&gt;{countrie.sno}&lt;/td&gt;
                        &lt;td&gt;{countrie.City}&lt;/td&gt;
                        &lt;td&gt;{countrie.State}&lt;/td&gt;
                        &lt;td&gt;{countrie.District}&lt;/td&gt;
                      &lt;/tr&gt;
                    ))}
  
                  &lt;/tbody&gt;
  
                &lt;/Table&gt;
              &lt;/div&gt;
            )
                    }
  
                  }           
            export default TableList;
  </code></pre>
  
  <p>This is my error</p>
  
  <pre><code>TypeError: d is not a function
  TableList.filterArray
          D:/campstar2.0_cp/src/views/TableList.jsx:132
            129 |     
            130 |     if(searchString.length &gt; 0){
            131 |       // console.log(responseData[i].name);
          &gt; 132 |       result = result.filter(searchString);
            133 | this.setState({
            134 |   result
            135 | })
          View compiled
          TableList.&lt;anonymous&gt;
          D:/campstar2.0_cp/src/views/TableList.jsx:102
             99 |     this.setState({
            100 |         query: event.target.value
            101 |     },()=&gt;{
          &gt; 102 |   this.filterArray();
            103 | })
            104 | 
            105 | }
  </code></pre>