title: Filtering JSON in React
body: <p>I'm loading some JSON data using FETCH. I'm trying to add/create a simple filtering functionality on the content displayed. </p>
  
  <p>I'm getting this error:</p>
  
  <p><strong>Uncaught TypeError: Cannot read property 'toLowerCase' of undefined</strong></p>
  
  <p>Any idea what could be causing this error?</p>
  
  <p>This my code so far:</p>
  
  <pre><code>let Table = React.createClass({
      getInitialState: function(){
          return { 
              accounts: [{
                  "product": "Fixed Saver", 
                  "interestRate": 2.20,
                  "minimumDeposit": 500,
                  "interestType": "Fixed"
              }],
              searchString: ''
          }
      },
      componentDidMount: function(){
          fetch('http://localhost:8888/table/json/accounts.json')
              .then(response =&gt; {
                  return response.json()
              })
              .then(json =&gt; {
                  this.setState({accounts: json})
              });
      },
      handleChange: function(e){
          this.setState({searchString:e.target.value});
      },
      render: function(){
          var libraries,
          libraries = this.state.accounts,
          searchString = this.state.searchString.trim().toLowerCase();
  
          if(searchString.length &gt; 0){
              libraries = libraries.filter(l =&gt; {
                  return l.name.toLowerCase().match( searchString );
              });
          }
  
          return (
              &lt;div className="container"&gt;
  
              &lt;input type="text" value={this.state.searchString} onChange={this.handleChange} placeholder="Type here" /&gt;
  
                  &lt;ul className="header clearfix"&gt;
                      &lt;li&gt;Product&lt;/li&gt;
                      &lt;li&gt;Interest rate&lt;/li&gt;
                      &lt;li&gt;Minimum deposit&lt;/li&gt;
                      &lt;li&gt;Interest type&lt;/li&gt;
                  &lt;/ul&gt;
  
                  {libraries.map(l =&gt; {
                  return (
                      &lt;div className="account clearfix" key={l.id}&gt;
                          &lt;div className="product"&gt;{l.product}&lt;/div&gt;
                          &lt;div&gt;{l.interestRate} %&lt;/div&gt;
                          &lt;div&gt;£ {l.minimumDeposit}&lt;/div&gt;
                          &lt;div&gt;{l.interestType}&lt;/div&gt;
                      &lt;/div&gt;
                      )
                  })} 
              &lt;/div&gt;
          )
      }
  });
  
  let App = React.createClass({
      render: function(){
          return(
              &lt;Table /&gt;
          );
      }
  });
  
  ReactDOM.render( &lt;App /&gt;, document.getElementById('table') );
  </code></pre>
  
  <p><strong>JSON</strong></p>
  
  <pre><code>[
     {
        "id": 1,
        "product": "Fixed Saver", 
        "interestRate": 2.20,
        "minimumDeposit": 500,
        "interestType": "Fixed"
     },
     {
        "id": 2,
        "product": "Fixed Saver", 
        "interestRate": 1.50,
        "minimumDeposit": 0,
        "interestType": "Tracker"
     },
     {
        "id": 3,
        "product": "Offset Saver", 
        "interestRate": 1.8,
        "minimumDeposit": 1000,
        "interestType": "Fixed"
     }
  ]
  </code></pre>