title: Change props in Higher-Order-Component in react
body: <p>I am trying to understand higher-order-components(referred to as HOC below):</p>
  
  <p>As such, I have created a sample HOC to do GET requests for my component:</p>
  
  <pre><code>import React from 'react';
  import { Text } from 'react-native';
  import axios from 'axios';
  
  export default (Elem,  props = {}) =&gt; {
      // mock props for testing
      props = {
          apiRequests: {
              "todoList": {
                  url: "https://jsonplaceholder.typicode.com/todos"
              }
          }
      }
      return class extends React.Component {
          componentWillMount() {
              let apis = Object.keys(props.apiRequests);
              for(let i = 0; i &lt; apis.length; i++) {
                  props.apiRequests[apis[i]].done = false
                  axios.get(props.apiRequests[apis[i]].url).then((resp) =&gt; {
                      console.warn("done")
                      props.apiRequests[apis[i]].done = true
                      props.apiRequests[apis[i]].data = resp.data
                  })
              }
          }
  
          render() {
              return (&lt;Elem {...props} /&gt;)
          }
      }
  }
  </code></pre>
  
  <p>Now, when I wrap my component with the above HOC, I get the props with <code>done</code> as <code>false</code>.</p>
  
  <p>However, soon, when I get my API response, the HOC logs <code>done</code> in my console, but the data in my component isn't updated. What am I doing wrong?</p>