title: Why i got TypeError: Cannot read property 'toLowerCase' of undefined
body: <p>I was building a website called starwarplanet.</p>
  <p>It used react.js to build.</p>
  <p>What it use the api is <a href="https://swapi.co/api/planets/" rel="nofollow noreferrer">this website</a></p>
  <p>And i got the error from it is</p>
  <pre><code>TypeError: Cannot read property 'toLowerCase' of undefined
  </code></pre>
  <p>I just want to show the planet's <code>name</code>,<code>diameter</code> and <code>rotation_period</code>.</p>
  <p>What is the problem in my <code>app.js</code> or <code>card.js</code>?</p>
  <p>in <code>app.js</code>:</p>
  <pre><code>import React,{Component} from 'react';
  import CardList from '../Components/CardList';
  import SearchBox from '../Components/SearchBox';
  import Scroll from '../Components/Scroll';
  import './App.css';
  
  class App extends Component{
      constructor(){
          super()
          this.state={
              planets:[],
              searchfield:''
          }
       }
       componentDidMount() {
          const urls = [
             'https://swapi.co/api/planets/',
             'https://swapi.co/api/planets/?page=2', 
             'https://swapi.co/api/planets/?page=3',
             'https://swapi.co/api/planets/?page=4',
             'https://swapi.co/api/planets/?page=5',
             'https://swapi.co/api/planets/?page=6',
             'https://swapi.co/api/planets/?page=7'
      ]
      
      Promise.all(urls.map(async url =&gt; {
          const response = await fetch(url);
          const morePlanets = await response.json();
          var combinedArrayOfPlanets = this.state.planets;
          combinedArrayOfPlanets.push(morePlanets.results);
          
          var sortedArrayOfPlanets = combinedArrayOfPlanets
              .flat()
              .sort((a, b) =&gt; a.name.localeCompare(b.name));
          
          this.setState({planets: sortedArrayOfPlanets})
      }))
      .catch(error =&gt; 
          console.log('Error during fetching of planets:', error)
      );
  }
  
  onSearchChange = (event) =&gt; {
      this.setState({ searchField: event.target.value })
  }
  render(){
      const {planets,searchField} = this.state;
      const filteredPlanets = planets.filter(planet=&gt;{
          return planet.name.toLowerCase().includes(
              searchField.toLowerCase())
              ||
              planet.diameter.toLowerCase().includes(
                  searchField.toLowerCase())
              ||
              planet.rotation_period.toLowerCase().includes(
                  searchField.toLowerCase())
      })
      return !planets.length?
      (
          &lt;div className='tc'&gt;
                      &lt;h1&gt;Loading&lt;/h1&gt;:
          &lt;/div&gt;
      ):
      (
      &lt;div className='tc'&gt;
          &lt;h1 className='f2'&gt;StarWarPlanet&lt;/h1&gt;
          &lt;SearchBox searchChange={this.onSearchChange}/&gt;
          &lt;Scroll&gt;
              &lt;CardList planets = {filteredPlanets}/&gt;
          &lt;/Scroll&gt;
      &lt;/div&gt;
      );
     }
    }
  
   export default (App);
  </code></pre>
  <p>in <code>Card.js</code>:</p>
  <pre><code>import React from 'react';
  
  const Card = ({name,diameter,rotation_period}) =&gt;{
      return(
         &lt;div className=&quot;bg-light-green dib br3 pa3 ma2 grow bw2 shadow-5&quot;&gt;
              &lt;div&gt;
                  &lt;h2&gt;{name}&lt;/h2&gt;
                  &lt;p&gt;{diameter}&lt;/p&gt;
                  &lt;p&gt;{rotation_period}&lt;/p&gt;
              &lt;/div&gt;
         &lt;/div&gt;
      );
     }
  
     export default Card;
  </code></pre>