title: React/JSX - How to render a list alphabetically
body: <p>I am working on someone else's code and trying to figure out how to render a list alphabetically in <strong>React</strong>. I didn't write any of this and have very little knowledge of <strong>React</strong>, so please bear with me. </p>
  
  <p>The <code>ul</code> looks like this:</p>
  
  <pre><code>&lt;ul className="prod-group__filter__options" ref={(options) =&gt; this.options = options}&gt;
      {
          filter.dropdown.map((option, index) =&gt; (
              this.renderOption(filter, option, index)
          ))
      }
  &lt;/ul&gt;
  </code></pre>
  
  <p>and the <code>renderOption</code> function, which obviously renders the list items looks like this:</p>
  
  <pre><code>renderOption(filter, option, index) {
      return (
          &lt;li className="prod-group__filter__option" key={index}&gt;
              &lt;label className="prod-group__filter__option__label"&gt;
                  &lt;input name={filter.name}
                         type="checkbox"
                         defaultValue={option.slug}
                         checked={option.checked}
                         onChange={this.optionChangeHandler} /&gt;
                  {option.label}
              &lt;/label&gt;
          &lt;/li&gt;
      );
  }
  </code></pre>
  
  <p>The value I am trying to alphabetize is <code>option.slug</code> which is coming from a json list. Can anyone help me get a bit closer to rendering this list alphabetically?</p>