title: How can I assign data from Http response in const Component?
body: <p>My goal is to ultimately create add a shopping cart functionality using context API. In order to do so I need to get the products from my database and store it in an array.</p>
  <p>Currently, the challenge I'm facing is how to retrieve the data from the axios response and store it in a variable that will be passed on within a const component. Apparently, the issue is that the variable gets passed to the child before the Axios response is complete. <a href="https://i.stack.imgur.com/KTT3V.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KTT3V.png" alt="enter image description here" /></a></p>
  <p>I tried using the <code>await</code> keyword, but got an error regarding not being in an <code>async</code> function. Hence, I tried plugging the <code>async</code> keyword but that didn't work as it yielded errors.</p>
  <p>I was able to retrieve data from axios within class components with success, however, I am unable to do so in these <code>const</code>.</p>
  <p>Here is my code:</p>
  <p><strong>Context.js</strong></p>
  <pre><code>import { createContext, useContext, useReducer } from &quot;react&quot;;
  import React from &quot;react&quot;;
  import ProductService from &quot;../services/ProductService&quot;;
  import { cartReducer } from &quot;./Reducers&quot;;
  
  const Cart = createContext();
  const Context = ({ children }) =&gt; {
    let products = [];
  
    console.log(&quot;part1&quot;, products);
  
    ProductService.getAllProducts().then((res) =&gt; {
      products = res.data; //Also tried setState({ products : res.data})
      console.log(&quot;response: &quot;, products);
    });
  
    const [state, dispatch] = useReducer(cartReducer, {
      products: products,
      cart: [],
    });
  
    return &lt;Cart.Provider value={{ state, dispatch }}&gt;{children}&lt;/Cart.Provider&gt;;
  };
  
  export const CartState = () =&gt; {
    return useContext(Cart);
  };
  
  export default Context;
  
  </code></pre>
  <p><strong>ProductService.js</strong></p>
  <pre><code>import axios from &quot;axios&quot;;
  
  const PRODUCT_BASE_URL = &quot;http://localhost:8080/api/v1/&quot;;
  
  class ProductService {
    getAllProducts() {
      return axios.get(PRODUCT_BASE_URL + &quot;products&quot;);
    }
    getProductsByCategory(category) {
      return axios.get(PRODUCT_BASE_URL + &quot;products/&quot; + category);
    }
  
    getProductById(id) {
      return axios.get(PRODUCT_BASE_URL + &quot;product/&quot; + id);
    }
  }
  export default new ProductService();
  
  </code></pre>
  <p><strong>Reducers.js</strong></p>
  <pre><code>export const cartReducer = (state, action) =&gt; {
    switch (action.type) {
      default:
        return state;
    }
  };
  </code></pre>
  <p><strong>HomeComponenet.jsx</strong></p>
  <pre><code>import React from &quot;react&quot;;
  import SlideShowComponent from &quot;./SlideShowComponent&quot;;
  import HomeCategoriesComponent from &quot;./HomeCategoriesComponent&quot;;
  import FeaturedProductsComponent from &quot;./FeaturedProductsComponent&quot;;
  import { CartState } from &quot;../context/Context&quot;;
  // class HomeComponent extends React.Component
  function HomeComponent() {
    const { state } = CartState();
    console.log(&quot;Cart Inside the Home Component: &quot;, state);
    return (
      &lt;&gt;
        &lt;SlideShowComponent /&gt;
        &lt;div&gt;
          &lt;HomeCategoriesComponent /&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;FeaturedProductsComponent /&gt;
        &lt;/div&gt;
      &lt;/&gt;
    );
  }
  
  export default HomeComponent;
  </code></pre>