title: ReactJS with Material-UI: How to sort an array of Material-UI's <TableRow> alphabetically?
body: <p>Currently, I render Material-UI's <code>&lt;Table&gt;'s</code> <code>&lt;TableRow&gt;</code> (<a href="http://www.material-ui.com/#/components/table" rel="noreferrer">http://www.material-ui.com/#/components/table</a>) with an array of <code>&lt;TableRow&gt;s</code> and by using <code>.map()</code>. Each <code>&lt;TableRow&gt;</code> has a <code>&lt;TableRowColumn&gt;</code> that represents a first name, like so <code>&lt;TableRowColumn&gt;Josh&lt;/TableRowColumn&gt;</code>. </p>
  
  <p>But, if a user presses a button, I would like to sort the <code>&lt;TableRow&gt;</code> array alphabetically by the <code>&lt;TableRowColumn&gt;'s</code> first name. So say for example out of 10 <code>&lt;TableRow&gt;s</code>, if the array[0] had a first name Conny and array[1] had Adrian, would like the array[1] to become array[0].</p>
  
  <p>What would the right approach to this? Any guidance or insight would be greatly appreciated it. </p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Each row would be rendered like so with the array <code>rows</code>, that has objects with properties <code>firstName</code> and <code>favColor</code>:</p>
  
  <pre><code>        {
            rows.map((row) =&gt; {
              return(
                &lt;UserRow
                  firstName={row.firstName}
                  favColor={row.favColor}
                /&gt;
              )
            })
          }
  </code></pre>
  
  <p>And each row is defined like so: </p>
  
  <pre><code>const UserRow = (props) =&gt; {
    const {firstName, favColor} = props
  
    return (
      &lt;TableRow&gt;
        &lt;TableRowColumn&gt;{firstName}&lt;/TableRowColumn&gt;
        &lt;TableRowColumn&gt;{favColor}&lt;/TableRowColumn&gt;
      &lt;/TableRow&gt;
    )
  }
  </code></pre>