title: TypeError - indexOf is not a function (React Data Search with MySQL)
body: <p>I am actually building a retrieval functionality in MERN Stack (MySQL, Express, React, Node). I have successfully created the retrieval; however the search based on the primary key is not working. Whenever I click search / fetch button after entering the value in the textfield it shows me the captioned error. 
  "TypeError: challanNo.indexOf is not a function"</p>
  
  <p>Please help. </p>
  
  <p><strong>My JS File for Search</strong></p>
  
  <pre><code>import React, { Component } from 'react'
  import jwt_decode from 'jwt-decode'
  import { Table, Button, Alert, ResponsiveEmbed } from 'react-bootstrap';
  import { login } from './UserFunctions'
  // Import React Table
  import ReactTable from "react-table";
  import "react-table/react-table.css";
  import matchSorter from 'match-sorter'
  import { render } from "react-dom";
  
  class Login extends Component {
      constructor(props) {
          super(props)
          this.state = {
              error: null,
              transaction: []
  
             // challan_no: null
          }
  
         //  this.onChange = this.onChange.bind(this)
           //this.searchEntry = this.searchEntry.bind(this)
         //  this.onSubmit = this.onSubmit.bind(this)
  
      }
  
  
      componentDidMount() {
          const apiUrl = 'http://localhost:3000/api/str/';
          fetch(apiUrl)
            .then( (response) =&gt; {
                return response.json();
              })
            .then((data) =&gt; {
                this.setState({ transaction: data.response })
                console.log(this.state.transaction)
              })
              .catch((error) =&gt; console.log(error));
        }
  
        filterChallan = (challanFilter) =&gt; {
  
          console.log("1:" + challanFilter)
          let filteredChallans = this.state.transaction
          console.log(filteredChallans)
  
          filteredChallans = filteredChallans.filter((challan) =&gt; {
            let challanNo = challan.CHALLAN_NO 
            console.log("Challan NO: " + challanNo)
            return challanNo.indexOf(challanFilter) !== -1
          })
          this.setState({
              filteredChallans
          })
          console.log(challanFilter)
        }
  
      //   searchEntry ()  {     
      //     console.log('in search entry..')
      //     const apiUrl = 'http://localhost:3000/api/str/1/';
  
      //     fetch(apiUrl)
      //     .then( (response) =&gt; {
      //         return response.json();
      //       })
      //     .then((data) =&gt; {
      //         this.setState({ transaction: data.response })
      //         console.log(this.state.transaction)
      //       })
      //       .catch((error) =&gt; console.log(error));
      //     }
  
      //  onSubmit(e){
      //      e.preventDefault()
  
      //      const user = {
      //          challan_no: this.state.challan_no
      //      }
      //      login(user).then(res=&gt; {
      //          if(res) {
      //              this.props.history.push(`/profile`)
      //          }
      //      })
      //  }
      render() {
          return( 
          &lt;div className="container"&gt;
                  &lt;div className="row"&gt;
                      &lt;div className="col-md-6 mt-5 mx-auto"&gt;
                          &lt;form className="form-horizontal" &gt;
                              &lt;h5 className="control-label"&gt;Fetch Fee Payment Details&lt;/h5&gt;
                              &lt;div className="form-row"&gt;
                              &lt;div className="form-group col-md-10"&gt;
                                      &lt;input type="text"
                                             className="form-control"
                                             name="challan_no"
                                             placeholder="Enter Challan Number"
                                             value={this.state.challan_no}
                                             onChange={this.filterChallan}
                                      /&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;button className="btn btn-primary btn-md float-left"&gt;
                                  Fetch
                              &lt;/button&gt;
                          &lt;/form&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;Table className="box2"&gt;
              &lt;thead&gt;
                &lt;tr&gt;
                  &lt;th&gt;Challan No&lt;/th&gt;
                  &lt;th&gt;Entity Name&lt;/th&gt;
                  &lt;th&gt;City&lt;/th&gt;
                  &lt;th&gt;Email&lt;/th&gt;
                  &lt;th&gt;Entity Type&lt;/th&gt;
                  &lt;th&gt;Registration No&lt;/th&gt;
                &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
              {this.state.transaction.map((str) =&gt; (
                  &lt;tr key={str.CHALLAN_NO}&gt;
                    &lt;td&gt;{str.CHALLAN_NO}&lt;/td&gt;
                    &lt;td&gt;{str.ENTITY_NAME}&lt;/td&gt;
                    &lt;td&gt;{str.CITY}&lt;/td&gt;
                    &lt;td&gt;{str.EMAIL}&lt;/td&gt;
                    &lt;td&gt;{str.ENTITY_TYPE}&lt;/td&gt;
                    &lt;td&gt;{str.REGISTRATION_NO}&lt;/td&gt;
                    &lt;td&gt;
                      &lt;button type="" className="btn btn-primary btn-md-7 float-left"&gt;
                       Delete
                      &lt;/button&gt;
                    &lt;/td&gt;
                  &lt;/tr&gt;
              ))}
              &lt;/tbody&gt;
            &lt;/Table&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default Login
  
  </code></pre>