title: Pass a dispatch-function to a helper-function
body: <p>I'm trying to pass a dispatch-function from the main-function to a helper-function but I'm having a hard time to figure out how. So I want to use the removeItem-dispatch-function in renderArticles. Here is the code:</p>
  <pre><code>import Modal from &quot;react-bootstrap/Modal&quot;;
  import Button from &quot;react-bootstrap/Button&quot;;
  import React, {useState} from &quot;react&quot;;
  import {connect} from &quot;react-redux&quot;;
  import '../../styles/shoppingBag.css'
  import Form from &quot;react-bootstrap/Form&quot;;
  
  
  function renderArticles({removeItem}){
      const articles = JSON.parse(localStorage.getItem(&quot;cartItems&quot;));
      console.log(articles);
      if(articles!==null) {
          return articles.map((items, index) =&gt; {
              return (
                  &lt;div key={index} className=&quot;articlesInShoppingBag&quot;&gt;
                      &lt;text id=&quot;dishName&quot;&gt; {items.name}&lt;/text&gt;
                      &lt;text id=&quot;price&quot;&gt; {items.price}€ &lt;/text&gt;
                      &lt;Form&gt;
                          &lt;Form.Row className=&quot;align-items-center&quot;&gt;
                                  &lt;Form.Label className=&quot;mr-sm-2&quot; htmlFor=&quot;inlineFormCustomSelect&quot; srOnly&gt;
                                      Preference
                                  &lt;/Form.Label&gt;
                                  &lt;Form.Control
                                      as=&quot;select&quot;
                                      className=&quot;mr-sm-2&quot;
                                      id=&quot;inlineFormCustomSelect&quot;
                                      custom
                                      defaultValue={items.count}
                                  &gt;
                                      &lt;option&gt;1&lt;/option&gt;
                                      &lt;option&gt;2&lt;/option&gt;
                                      &lt;option&gt;3&lt;/option&gt;
                                      &lt;option&gt;4&lt;/option&gt;
                                      &lt;option&gt;6&lt;/option&gt;
                                      &lt;option&gt;7&lt;/option&gt;
                                      &lt;option&gt;8&lt;/option&gt;
                                      &lt;option&gt;9&lt;/option&gt;
                                      &lt;option&gt;10&lt;/option&gt;
                                      &lt;option&gt;11&lt;/option&gt;
                                  &lt;/Form.Control&gt;
                      &lt;/Form.Row&gt;
                  &lt;/Form&gt;
                  &lt;button className=&quot;removeButton&quot; onClick={()=&gt;{removeItem(index)}}&gt;
                      &lt;text&gt;remove&lt;/text&gt;
                  &lt;/button&gt;
                  &lt;/div&gt;
              )
          })
      }else{
          return(
              &lt;div&gt;
                  &lt;text&gt;keine Artikel im Warenkorb&lt;/text&gt;
              &lt;/div&gt;
          )
      }
  }
  
  function renderPayment(){
      return(
          &lt;div&gt;
              &lt;text&gt;Hier entsteht das Payment&lt;/text&gt;
          &lt;/div&gt;
      )
  }
  
  function ShoppingBagModal({toggleModal,bagModal,removeItem}){
  
      const [shoppingBagToggle,setShoppingBagToggle] = useState(0);
  
      const increaseShoppingBagToggle=()=&gt;{
          setShoppingBagToggle(shoppingBagToggle+1);
      };
  
      const decreaseShoppingBagToggle=()=&gt;{
          setShoppingBagToggle(shoppingBagToggle-1);
      };
  
      const resetShoppingBagToggle=()=&gt;{
          setShoppingBagToggle(0);
      }
  
      return (
          &lt;&gt;
              &lt;Modal show={bagModal} onHide={toggleModal}&gt;
                  &lt;Modal.Header closeButton onClick={resetShoppingBagToggle}&gt;
                      &lt;Modal.Title&gt;
                          {(shoppingBagToggle===0)&amp;&amp;(
                              &lt;text&gt;Warenkorb&lt;/text&gt;
                          )}
                          {(shoppingBagToggle===1)&amp;&amp;(
                              &lt;text&gt;Checkout&lt;/text&gt;
                          )}
                      &lt;/Modal.Title&gt;
                  &lt;/Modal.Header&gt;
                  &lt;Modal.Body&gt;
                      {(shoppingBagToggle===0)&amp;&amp;(
                          renderArticles({removeItem})
                      )}
                      {(shoppingBagToggle===1)&amp;&amp;(
                          renderPayment()
                      )}
                  &lt;/Modal.Body&gt;
                  &lt;Modal.Footer&gt;
                      {(shoppingBagToggle===0)&amp;&amp;(
                          &lt;div&gt;
                          &lt;Button variant=&quot;secondary&quot; onClick={()=&gt;{
                              toggleModal();
                              resetShoppingBagToggle()
                          }}&gt;
                              Close
                          &lt;/Button&gt;
                          &lt;Button
                              className=&quot;modalFooter&quot;
                              onClick={increaseShoppingBagToggle}
                          &gt;
                              Zur Bezahlung
                          &lt;/Button&gt;
                          &lt;/div&gt;
                      )}
                      {(shoppingBagToggle===1)&amp;&amp;(
                          &lt;div&gt;
                              &lt;Button variant=&quot;secondary&quot; onClick={decreaseShoppingBagToggle}&gt;
                                  Zurück
                              &lt;/Button&gt;
                              &lt;Button
                                  className=&quot;modalFooter&quot;
                              &gt;
                                  Jetzt bezahlen
                              &lt;/Button&gt;
                          &lt;/div&gt;
                      )}
                  &lt;/Modal.Footer&gt;
              &lt;/Modal&gt;
          &lt;/&gt;
      );
  }
  
  function mapStateToProps(state) {
      return {
          bagModal: state.bagModal,
          items: state.items
      }
  }
  
  const  mapDispatchToProps=(dispatch)=&gt;{
      return {
          toggleModal: ()=&gt;dispatch({type:&quot;TOGGLE_SHOPPING_BAG_MODAL&quot;}),
          getOrdersFromLocalStorage: ()=&gt;dispatch({type:&quot;GET_ITEMS_FROM_LOCALSTORAGE&quot;}),
          updateCart: (value,item)=&gt;dispatch({type:&quot;UPDATE_ITEM_IN_CART&quot;,payload:{value:value,item:item}}),
          removeItem: (atIndex)=&gt;({type:&quot;REMOVE_ITEM_FROM_CART&quot;,payload:atIndex})
      }
  };
  
  
  export default connect(mapStateToProps,mapDispatchToProps)(ShoppingBagModal);
  </code></pre>
  <p>The dispatch function is accessed in ShoppingBagModal and should be passed to renderArticles.
  Thanks in advance for your help.</p>