лучший способ показать заголовок в функции карты, если условие отличается от предыдущего элемента

Question

У меня есть компонент реагирования, который зацикливается на список дней. Я только хочу показать заголовок, если день отличается.

const items = [
  {
    day: 'Monday',
    band: 'Oasis'
  },
  {
    day: 'Monday',
    band: 'Blur'
  },
  {
    day: 'Monday',
    band: 'Blue'
  },
  {
    day: 'Tuesday',
    band: 'REM'
  },
  {
    day: 'Wednesday',
    band: 'Hi-Lo'
  },
  {
    day: 'Wednesday',
    band: 'Bla'
  }
];

Моя функция рендеринга выглядит так:

items.map((item, index) => {
  {items[index] !== items[index + 1] && (
      <h1>{item.day}</h1>
  )         
    return <p>{item.band}</p>
  }
});

Я хочу, чтобы это выглядело следующим образом:

понедельник

Oasis

Размытие

синий

вторник

REM

среда

Привет-Lo

Bla

Answer 1

var r = items.reduce((current, next) => {
 current[next.day] = current[next.day] || []
 current[next.day].push(next.band)
 return current
}, [])

тогда у вас будет объект r, содержащий ключи в виде дней (заголовок). и вы можете перебрать его:

Object.keys(r).map(header => console.log(header, r[header]))

Answer 2

Вы должны сгруппировать свой объект по дням, а затем отрендерить его

const items = [
  {
    day: 'Monday',
    band: 'Oasis'
  },
  {
    day: 'Monday',
    band: 'Blur'
  },
  {
    day: 'Monday',
    band: 'Blue'
  },
  {
    day: 'Tuesday',
    band: 'REM'
  },
  {
    day: 'Wednesday',
    band: 'Hi-Lo'
  },
  {
    day: 'Wednesday',
    band: 'Bla'
  }
];

class App extends React.Component {
   render() {
       const grouped = items.reduce((acc, item) => {
           if(acc[item.day]) {
              acc[item.day].push(item);
           }else {
              acc[item.day] = [item]; 
           }
           return acc;
       }, {})
       return (
          <div>
               {Object.keys(grouped).map(day => {
                  return <ul>
                     <li>{day}</li>
                     {grouped[day].map(item => {
                        return <li>{item.band}</li>
                     })}
                  </ul>
               })}
          </div>
       )
   }
}

ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"/>