title: Props become undefined when trying to render a component inside another component
body: <p>I'm trying to render the <code>BookList</code> component inside the <code>ProfilePage</code> component, but I've run into a problem I can't seem to fix on my own, mainly because I'm not at all sure what the cause is.<br>
  Here is the <code>ProfilePage</code> Component:</p>
  
  <pre><code>import React from 'react';
  import { connect } from 'react-redux';
  import { getUser, deleteBook } from '../actions/actions';
  import { addFlashMessage } from '../actions/flashMessages';
  import BookList from './BookList';
  
  class ProfilePage extends React.Component {
  
      componentWillMount = () =&gt; {
          // Get user data by username
          this.props.getUser(this.props.match.params.username)
              .catch(err =&gt; {
                  this.props.addFlashMessage({
                      type: 'error',
                      text: err.response.data.error,
                  })
              });
      };
  
      render() {
          const { picture, name, email, books } = this.props.profileUser;
          console.log(picture, name, email, books);
          const whenOwner = (
              &lt;div className="extra"&gt;
                  &lt;div className="ui right floated primary button"&gt;
                      Edit
                      &lt;i className="right edit icon"&gt;&lt;/i&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
          return (
              &lt;div className="ui items"&gt;
                  &lt;div className="item"&gt;
                      &lt;div className="ui small image"&gt;
                          &lt;img src={picture || 'https://semantic-ui.com/images/wireframe/image.png'} alt="Profile picture"/&gt;
                      &lt;/div&gt;
                      &lt;div className="content"&gt;
                          &lt;div className="header"&gt;
                              {name}
                          &lt;/div&gt;
                          &lt;div className="description"&gt;
                              &lt;p&gt;{email}&lt;/p&gt;
                          &lt;/div&gt;
                          {this.props.currentUser &amp;&amp; whenOwner}
                      &lt;/div&gt;
                  &lt;/div&gt;
                  {/*&lt;BookList books={books} deleteBook={this.props.deleteBook}/&gt;*/}
              &lt;/div&gt;
          )
      }
  }
  
  function mapStateToProps(state) {
      if(state.auth.isAuthenticated) {
          return {
              currentUser: state.auth,
              profileUser: state.user
          }
      } else {
          console.log(state);
          return {
              profileUser: state.user
          }
      }
  }
  
  React.propTypes = {
      profileUser: React.PropTypes.object.isRequired,
      currentUser: React.PropTypes.object,
  };
  
  
  export default connect(mapStateToProps, { getUser, addFlashMessage, deleteBook })(ProfilePage);
  </code></pre>
  
  <p>When <code>BookList</code> is commented out the page renders just fine. The relevant props for <code>BookList</code> are also all there. But as soon as I uncomment <code>BookList</code> I get an error that <code>books</code> (<code>this.props.profileUser.books</code>) is undefined.
  This is the exact error React throws:  </p>
  
  <pre><code>TypeError: Cannot read property 'map' of undefined
  BookList
  C:\Users\erody\WebstormProjects\book_trading_club\src\components\BookList.js:16
  </code></pre>
  
  <p>I doubt that there is a problem with the <code>BookList</code> component itself, because I'm using it somewhere else and it's working fine there. But here it is anyways:  </p>
  
  <pre><code>import React from 'react';
  import BookCard from './BookCard';
  
  const BookList = ({books, deleteBook}) =&gt; {
  
      console.log(books);
  
      const emptyMessage = (
          &lt;p&gt;
              There are no books.
          &lt;/p&gt;
      );
  
      const bookList = (
          &lt;div className="ui five cards"&gt;
              { books.map(book =&gt; &lt;BookCard deleteBook={deleteBook} book={book} key={book._id}/&gt;)}
          &lt;/div&gt;
      );
  
      return (
          &lt;div&gt;
              {books.length ? bookList : emptyMessage}
          &lt;/div&gt;
      )
  };
  
  BookList.propTypes = {
      books: React.PropTypes.array.isRequired,
      deleteBook: React.PropTypes.func.isRequired
  };
  
  export default BookList;
  </code></pre>
  
  <p>When looking through Redux devtools everything seems fine. The action is dispatched and the state is updated correctly.<br>
  If it would help if I added the action and the relevant reducer I can add those as well, I just didn't want to make this post too long.  </p>