title: Why my books not arranged in correct shelves (React-Redux)?
body: <p>I am creating a book tracking app that fetches books by ajax and organize them on shelves, i have many components but i have a problem that exists between two of them, AllShelves, and BookShelf, i am so confused, the shelf titles is rendered in the correct order as in shelves array, my problem starts when i try to arrange books on their corresponding shelves, i need shelfName to do that, i filtered my books in mapStateToProps but i ended with books in wrong shelves, when i console logged shelfName in mapStateToProps i got this order</p>
  
  <pre><code>//read
  //currentlyReading
  //wantToRead
  </code></pre>
  
  <p>instead of    </p>
  
  <pre><code>//currentlyReading
  //wantToRead
  //read
  </code></pre>
  
  <p>and even duplicated</p>
  
  <p>These are my components</p>
  
  <p>The first component</p>
  
  <pre><code>import React, {Component} from 'react';
  import BookShelf from './BookShelf'
  
  const AllShelves = () =&gt; {
  
     const shelves = [
      {
        title: 'Currently Reading',
        shelfName: 'currentlyReading'
      },
      {
        title: 'Want to read',
        shelfName: 'wantToRead'
      }, 
      {
        title:'Read',
        shelfName: 'read'
      }
    ];
  
    return(
     &lt;div&gt;
      {shelves.map((shelf, index) =&gt; {
        return (
          &lt;div className="shelf" key={index}&gt;
            &lt;h2&gt;{shelf.title}&lt;/h2&gt;
            &lt;BookShelf 
              shelfName={shelf.shelfName}
            /&gt;
          &lt;/div&gt;
        );
      })}
    &lt;/div&gt;
   );
  } 
  
  export default AllShelves;
  </code></pre>
  
  <p>The child component</p>
  
  <pre><code>import React, { Component } from 'react';
  import Book from './Book'
  import {connect } from 'react-redux';
  
  
  let shelfName = '';
  
  const BookShelf = (props) =&gt; {
  
    shelfName = props.shelfName;
  
    return(
      &lt;div className="book-shelf"&gt;
         {props.books.map(book =&gt; (
            &lt;Book 
              key={book.id}
              book={book}
            /&gt;
          ))}
      &lt;/div&gt;
    );
   }
  
  const mapStateToProps = state =&gt; {
    console.log(shelfName)//read
                          //currentlyReading
                          //wantToRead
    return {
      books: state.filter(book =&gt; book.shelf === shelfName)
   }
  }
  
  export default connect(mapStateToProps, null)(BookShelf);
  </code></pre>
  
  <p>So what is the problem here, why not shelfName items not logged in correct order like titles.</p>