title: Why does my HTML not display when I iterate through the populated array?
body: <p>I am currently working with react, redux, and firebase to display a list of available books for sale. I have successfully populated an array with all the information I want to display and updated the state for redux with this information. However, the HTML does not change from a blank screen.</p>
  
  <p>I have posted some relevant code below.</p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import NavBar from './NavBar'
  import {populate} from '../actions'
  import {useSelector, useDispatch} from 'react-redux' 
  
  
  const ItemList = () =&gt; {
      const itemList = useSelector(state =&gt; state.listReducer);
      const dispatch = useDispatch();
      if (!itemList.isLoaded) {
          dispatch(populate());
      }
  
  
      //Displays all items for sale
      return( 
          &lt;div&gt;
            &lt;header&gt;
                &lt;div className='wrapper'&gt;
                &lt;/div&gt;
            &lt;/header&gt;
            &lt;div className='container'&gt;
              &lt;section className='display-item'&gt;
                  &lt;div className="wrapper"&gt;
                    &lt;ul&gt;
                      {itemList.isLoaded ? itemList.items.map((item) =&gt; {
                        return (
                          &lt;li key={item.id}&gt;
                            &lt;h3 key={item.title}&gt;{item.title}&lt;/h3&gt;
                            &lt;p key={item.author}&gt;Author: {item.author}
                              &lt;button key={"button:" + item.id}&gt;See item details&lt;/button&gt;
                            &lt;/p&gt;
                          &lt;/li&gt;
                        )
                      }) : null}
                    &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/section&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        );
  }
  
  export default ItemList
  </code></pre>
  
  <p>Reducer code below</p>
  
  <pre><code>const initialState = {
      items: [],
      isLoaded: false,
  }
  
  
  const listReducer = (state=initialState,action) =&gt; {
      switch (action.type) {
          case 'POPULATE-LIST':
              return {   
                  items: action.payload,
                  isLoaded: true,
              }
  
          case 'ADD-ITEM':
              let newState = state.slice();
              newState.push(action.payload);
              return newState
  
  
          default: {
              return state;
          }
      }
  }
  
  </code></pre>
  
  <p>Action method below</p>
  
  <pre><code>export const populate = () =&gt; (
      dispatch, 
      getState, 
      {getFirebase}) =&gt; {
          const firebase = getFirebase();
          let items = [];
          const itemsRef = firebase.firestore().collection("items").doc("all-items").collection("books");
          itemsRef.get().then(documentSnapshot =&gt; {
              documentSnapshot.forEach(doc =&gt; {
              const item = doc.data();
              items.push(item);            
              })   
          }).then(dispatch({type: 'POPULATE-LIST', payload: items}))
  
      }
  </code></pre>
  
  <p>In addition, I am currently also using redux-thunk</p>