title: How to filter api data in React
body: <p>So i'm trying to filter my star wars api data through a searchbox and got this so far :</p>
  
  <pre><code>class Card extends Component {
    constructor(){
      super()
      this.state = {
        jedi: [],
        searchfield: ''
      }
    }
  
  
    // Loop through API
    componentDidMount(){
      fetch('https://swapi.co/api/people/1')
        .then(response =&gt; { return response.json()})
        .then(people =&gt; this.setState({jedi:people}))
    }
  
    onSearchChange = (event) =&gt; {
      this.setState({searchfield: event.target.value})
      console.log(event.target.value)
    }   
  
    render() {
      const {jedi, searchfield} = this.state;
      const filteredCharacters = jedi.filter(jedi =&gt; {
        return jedi.name.toLowerCase().includes(searchfield.toLowerCase());
      })
    }
  }
  </code></pre>
  
  <p>This is my SearchBox component </p>
  
  <pre><code>import React from 'react';
  
  const SearchBox = ({searchfield, searchChange})=&gt; {
    return (
      &lt;div className= 'searchbox1'&gt;
        &lt;input className = 'searchbox2' 
          type = 'search' 
          placeholder = 'search character'
          onChange = {searchChange} 
          /&gt;
      &lt;/div&gt;
    )
  }
  
  export {SearchBox};
  </code></pre>
  
  <p>This is the render in the main app component</p>
  
  <pre><code>render() {
    return (
      &lt;div className="App"&gt;
        &lt;header className="App-header"&gt;
          &lt;img src={lightsaber} className="App-logo" alt="logo"/&gt;
          &lt;h1 className="App-title"&gt;
            Star Wars Character App w/API
          &lt;/h1&gt;
        &lt;/header&gt;  
  
        &lt;SearchBox searchChange= {this.onSearchChange} /&gt;
  
        &lt;div className = 'allcards'&gt;
          &lt;Card jedi = {this.filteredCharacters}/&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    ); 
  }
  </code></pre>
  
  <p>It keeps giving me the error "jedi.filter is not a function'. Initially I figured since filter only works on Arrays and my data were strings, that i'd use <code>jedi.split('').filter</code>. But that didnt seem to work as I just got "jedi.split isnt a function". What's going on?</p>