title: Can a function's return be passed into the ReactDOM render as a variable?
body: <p>What is the correct way to pass a function's return into the ReactDOM render? Below is the code I currently have that is throwing an error. </p>
  
  <pre><code>var customerFunc = () =&gt; {
    axios('/customers')
    .then(response =&gt; {
      var customersArray = response.data; 
      console.log("Customers Response:", customersArray)
      return customersArray;
    })
  }
  
  ReactDOM.render(
    &lt;App initialCustomers={customerFunc()}/&gt;, 
    document.getElementById('root')
  )
  </code></pre>
  
  <p>Previous to adding this function, I was passing in dummy data in an array into initialCustomers (<code>(initialCustomers={customersArray}</code>) and it worked perfectly. I am now trying to hit an endpoint and return the array of customers in the function (the <code>customerFunc</code> function). The Customers Response console log in the function returns an array of customers, with the same fields the dummy data array had so I know it is not a problem with retrieving the data. </p>
  
  <p>However, every time I pass in the customer function into initialCustomers, it returns the error: </p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'map' of undefined</p>
  </blockquote>
  
  <p>And when I console log within the App component (<code>{console.log("Initial Customers:", this.props.initialCustomers)}</code>) it does indeed return undefined. Any ideas on what I am doing wrong? </p>
  
  <p>Thanks! </p>