title: ReactJS: Filter rendering of a list by whole names only?
body: <p>I am currently rendering a list of data returned from an API using the <code>map()</code> function as follows:</p>
  
  <pre><code>renderLocation() {
      return this.props.locations.map(location =&gt; {
        return (
          &lt;div key={location.id}&gt;
            &lt;div className="location"&gt;
              &lt;h1&gt;
                {location.name}
                {location.airport_code}
              &lt;/h1&gt;
              &lt;div className="location-secondary-info"&gt;
                &lt;span&gt;
                  &lt;i className="material-icons"&gt;airplanemode_active&lt;/i&gt;
                  {location.description}
                &lt;/span&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        );
      });
    }
  </code></pre>
  
  <p>I now want to filter the rendering, so that the only <code>locations</code> that are rendered are those that have a correct <code>name</code> field value. My API data looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/6xBht.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6xBht.png" alt="enter image description here"></a></p>
  
  <p>I only want <code>locations</code> to be rendered if the <code>locations.name</code> is an actual valid city name. </p>
  
  <p>So for instance, a location with a <code>name</code> of <code>"Chicago O'Hare"</code> would be a valid city name, and should be displayed. A location with a <code>name</code> of <code>"Chicago O'Hare A5C"</code> however, should not be rendered seeing it has the <code>A5C</code> at the end which makes it invalid.</p>