В алфавитном порядке с заголовком в реагировании

Question

У меня есть список элементов, выбранных через API, который отсортирован в алфавитном порядке, но я хочу добавить заголовок над элементами списка. Например, как показано ниже Структура HTML

<h4> A</h4 >
<ul>
    <li>Apple</li>
    <li>Ant</li>
</ul>
<h4>B</h4>
<ul>
    <li>Babel</li>
    <li>Ball</li>
</ul>

Пока что я составил список пунктов, как показано ниже в функции:

filterItems = (itemList) => {
    result = result.map((item, index) => (
        <li className="brand-item" key={index}><a href="#">
            <img onError={this.nobrandimage} src={item.thumbnail} className="img-responsive" /></a>
        </li>
    ))
    return result;
}

Ниже моя функция рендеринга:

render(){
    //code to get the letterkey, I am not sure how to put this in map function to render**
    var letters = '', groups = {};
    for (var i = 0, len; i < len; i++) {
        var letterKey = brands[i].name.charAt(0).toLowerCase(); // get the first letter
        if (letters.indexOf(letterKey) === -1) {
            letters += letterKey;
            groups[letterKey] = [brands[i]];
        } else {
            groups[letterKey].push([brands[i]]);
        }
    };

    console.log(letters);

    let brands = this.props.brands.all_brands
    if (brands) brands.sort(this.dynamicSort("name"));
    if (brands) len = brands.length
    const filteredList = this.filterItems(brands, letters);
    return (
        <ul>
            {filteredList}
        </ul>
    );
}

Примечание. Мне нужна помощь для сопоставления первой буквы с моим списком в заголовочном теге.

Образец URL приложения для лучшего просмотра: https://stackblitz.com/edit/react-pfzlvo

Answer 1

Предварительно обработайте ваши бренды на карте {letterKey: [бренды]} для использования в функции рендеринга.

const groups = brands.reduce((groups, brand) => {
  const letterKey = brand.name.charAt(0).toLowerCase();
  (groups[letterKey] || (groups[letterKey] = [])).push(brand);
  return groups;
}, {});

Сопоставьте записи [key, брендов] с неупорядоченным списком

Object.entries(groups).sort().map(([letterKey, brands]) => (
  <div key={letterKey}>
    <h4>{letterKey}</h4>
    <ul>
      { brands.map(brand => <li key={brand}>{brand}</li>) }
    </ul>
</div>
));

const brands = ['cca', 'ccb', 'ccc', 'bba', 'bbb', 'bbc', 'aaa', 'aab', 'aac'];

const groups = brands.reduce((groups, brand) => {
  const letterKey = brand.charAt(0).toLowerCase();
  (groups[letterKey] || (groups[letterKey] = [])).push(brand);
  return groups;
}, {});


Object.entries(groups).sort().map(([letterKey, brands]) => {
  console.log('KEY', letterKey);
  brands.map(brand => console.log('\tbrand', brand));
});

Answer 2

Object.keys(groups).map(letter, key => (   

    <div key={key}>
        <h4>{letter}</h4>
        <ul>
            {
                groups[letter].map((word, index) => (
                    <li key={index}>{word}</li>
                ))
            }
        </ul>
    </div>


))

Answer 3

После того, как вы сгруппировали бренды groups = {a: [apple, Ant], b: [Babel, Ball], ...}, вы можете повторять группы, например

Object.keys(groups).sort().map(letter, key => (   

    <div key={key}>
        <h4>{letter}</h4>
        <ul>
            {
                groups[letter].map((word, index) => (
                    <li key={index}>{word}</li>
                ))
            }
        </ul>
    </div>


))