title: ReactJS: TypeError: Cannot read property 'map' of undefined
body: <p>I get this error in my ReactJS app that pulls places data.
  it seems to me that the error shows when <code>map()</code> points to <code>null</code></p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'map' of undefined</p>
  </blockquote>
  
  <p>I could not figure out a way to make a default value</p>
  
  <p>and this is the code:</p>
  
  <pre><code>import React, {Component} from 'react';
  // This component is for search list view, it render the props places data,
  // And handle cilck for place item.
  class SearchList extends Component {
      render() {
          // const {places, query, selectPlace} = this.props;
          const {places,query,selectPlace} = this.props;
  
  
          return (
  
          &lt;div className="container"&gt;
                  &lt;hr/&gt;
                  &lt;div className="input-group"&gt;
                      &lt;input
                          type="text"
                          className="form-control"
                          placeholder="Filter"
                          aria-label="Filter Input"
                          onChange={(event) =&gt; {
                              query(event.target.value);
                          }}
                      /&gt;
                      &lt;span className="input-group-addon"&gt;
                &lt;i className="fas fa-filter"&gt;&lt;/i&gt;
              &lt;/span&gt;
                  &lt;/div&gt;
                  &lt;hr/&gt;
                  &lt;div style={{maxHeight: '82vh', overflow: 'scroll'}}&gt;
                      &lt;ul className="list-group"&gt;
                          {
                              places.map(place =&gt; (
                              &lt;li
                                  tabIndex="0"
                                  key={place.id}
                                  className="list-group-item list-group-item-action"
                                  onClick={() =&gt; selectPlace(place)}&gt;
                                  &lt;span&gt;{place.name}&lt;/span&gt;
                              &lt;/li&gt;
                          ))
                          }
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default SearchList;
  </code></pre>