title: Filtering A List With React
body: <p>Hmm, I don't see my omission, but I get a blank page with a console error saying:</p>
  
  <pre><code>Users.js:9 Uncaught TypeError: Cannot read property 'filter' of undefined
      at Users.render (Users.js:9)
  </code></pre>
  
  <p>Apparently I'm using 'filter()' improperly. I looked around but didn't find anything 'React' related. Can Anyone help? Here are the files:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;React App&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="root"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>index.js</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import Users from './Users';
  
  ReactDOM.render(
    &lt;Users list={[
      { name: 'Tyler', friend: true },
      { name: 'Ryan', friend: true },
      { name: 'Michael', friend: false },
      { name: 'Mikenzie', friend: false },
      { name: 'Jessica', friend: true },
      { name: 'Dan', friend: false }
      ]}
    /&gt;,
    document.getElementById('root')
  );
  </code></pre>
  
  <p>Users.js</p>
  
  <pre><code>import React from 'react';
  
  class Users extends React.Component {
    render() {
      return (
        &lt;div&gt;
          &lt;h1&gt;Friends:&lt;/h1&gt;
          &lt;ul&gt;
            {this.props.list.friend.filter(function (friend) {
              return &lt;li&gt;{friend[0] === 'true'}&lt;/li&gt;
          })}
          &lt;/ul&gt;
  
          &lt;hr /&gt;
  
          &lt;h1&gt;Non Friends:&lt;/h1&gt;
          &lt;ul&gt;
            {this.props.list.friend.filter(function (nonFriend) {
              return &lt;li&gt;{nonFriend[0] === 'false'}&lt;/li&gt;
            })}
          &lt;/ul&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Users;
  </code></pre>