title: ReactJS Material UI autocomplete: How to Configure data source
body: <p>I am using <a href="http://www.material-ui.com/#/components/auto-complete" rel="nofollow noreferrer">material ui</a> autocomplete in one of a react components. The data source is received from the server (response to a asynchronous call)  and has the following shape</p>
  
  <pre><code>const dataSource = [{
   id: 001
   firstName: 'fname',
   lastName: 'lName
  }]
  </code></pre>
  
  <p>And Configuration is as following </p>
  
  <pre><code>const dataSourceConfig = {
   text: 'fName',
   value: 'id'
  }
  </code></pre>
  
  <p>What i want to do is to concatenate <code>firstName</code> and <code>lastName</code> and provide it to <code>dataSourceConfig</code></p>
  
  <pre><code>const dataSourceConfig = {
   text: 'fName' + 'lName',
   value: 'id'
  }
  </code></pre>
  
  <p>But this does not work. Could someone please help me with this</p>