React/JSX - Wie man eine Liste alphabetisch rendert

Question

Ich arbeite an jemand anderen Code und versuchen herauszufinden, wie man eine Liste in React alphabetisch rendern. Ich habe nichts davon geschrieben und habe sehr wenig Wissen über React, also bitte bitte mit mir.

Die ul sieht wie folgt aus:

<ul className="prod-group__filter__options" ref={(options) => this.options = options}> 
    { 
     filter.dropdown.map((option, index) => (
      this.renderOption(filter, option, index) 
     )) 
    } 
</ul> 

und die renderOption-Funktion, die die Listenelemente offensichtlich macht sieht wie folgt aus:

renderOption(filter, option, index) { 
    return (
     <li className="prod-group__filter__option" key={index}> 
      <label className="prod-group__filter__option__label"> 
       <input name={filter.name} 
         type="checkbox" 
         defaultValue={option.slug} 
         checked={option.checked} 
         onChange={this.optionChangeHandler} /> 
       {option.label} 
      </label> 
     </li> 
    ); 
} 

Der Wert I ist option.slug alphabetize bin versucht, das ist aus einer json-Liste kommen. Kann mir jemand helfen, diese Liste alphabetisch zu rendern?

Answer 1

Es sieht aus wie filter.dropdown ist Ihr Array von Optionen. Dieses Array wird an die .map()-Methode übergeben, die dann eine renderOption-Methode in der angegebenen Reihenfolge ausführt.

Daher sollten Sie das filter.dropdown Array in Ihrem ul Komponentencode kurz vor dem Aufruf .map() darauf sortieren.

Answer 2

Sie müssen option alphabetisch mit plain javascript sortieren, bevor Sie filter.dropdown.map... darauf aufrufen. Ich würde empfehlen mit lodash Funktion _.sortBy(option, 'slug'); wo Option ist ein Array von Objekten mit einer Eigenschaft namens slug dann können Sie das sortierte Ergebnis an Ihre Map-Funktion übergeben.

Answer 3

Falls jemand interessiert ist, war die Lösung, die Listenelemente zu sortieren, bevor sie .map() darauf anriefen, wie Macbem und Finch vorgeschlagen. Ich benutzen const ein „Artikel“ Konstruktor zu erstellen, die ich dann in die ul weiter unten passieren könnte:

const items = [].concat(this.props.options) 
    .sort((a, b) => { 
    const One = a.slug.toUpperCase(); 
    const Two = b.slug.toUpperCase(); 

    return (One < Two) ? -1 : (One > Two) ? 1 : 0; 
    }) 
    .map((option, index) => this.renderOption(name, option, index)); 

return (
    <div className={classes}> 
    <a className="prod-group__filter__dropdown" 
     ref={(trigger) => this.trigger = trigger} 
     onClick={this.triggerClickHandler}> 
     {label} 
    </a> 
    <ul className="prod-group__filter__options" ref={options => this.options = options}> 
     { items } 
    </ul> 
    </div> 
);