I need to display text messages in sections:

Messages received today, messages received yesterday, messages received this week, messages received this month, and keep going in month intervals after that...

Example:

[![enter image description here](https://i.stack.imgur.com/REUGK.png)](https://i.stack.imgur.com/REUGK.png)

My attempt: 

Dashboard.js

```
import React from "react"
import MessageList from "./MessageList"

export default class Dashboard extends React.Component {

  constructor() {
    super()
    this.state = {
      messages: [
            {
                id: "1",
                body: "Hello",
                date: "2017-04-22T09:25:50",

            },
            {
                id: "2",
                body: "Hello",
                date: "2017-04-21T04:31:22",

            },
            {
                id: "3",
                body: "How are you?",
                date: "2017-04-21T03:08:31",

            },
            {
                id: "4",
                body: "Meeting soon",
                date: "2017-04-18T01:10:32",

            }
        ]
      }
    }

  render() {
    return (
      <div id="dashboard">
        <MessageList messages={this.state.messages}/>
      </div>
    )
  }
}

```

MessageList.js

```
import React from "react"

export default class MessageList extends React.Component {
  constructor() {
    super()
  }

  render() {
    var currentDate = new Date()
    var currentDayOfMonth = currentDate.getDate()
    var currentDayOfWeek = currentDate.getDay()
    var timeline = "Today"

    const messageList = this.props.messages.map((message) => {

      var date = message.date.substring(0, 10)
      var time = message.date.slice(12)

      var testDate = new Date(date)
      var testDayOfMonth = testDate.getDate()+1
      var testDayOfWeek = testDate.getDay()

      if(currentDayOfMonth == testDayOfMonth+1){
        timeline = 'Yesterday'
      } else if(currentDayOfMonth > testDayOfMonth+1 && currentDayOfWeek - testDayOfWeek < 6) {
        timeline = 'This week'
      }

        return (
          <div key={message.id}>
            <h2>{timeline}</h2>
            <li className="list-group-item">
              Date: {date} <br></br>
              Time: {time} <br></br>
              Body: {message.body}
            </li>
          </div>
        )
    })

    return (
      <div id="messageList">
        <ul className="list-group">
          {messageList}
        </ul>
      </div>
    )
  }
}

```

However, my app looks like this:

[![enter image description here](https://i.stack.imgur.com/6jVEm.png)](https://i.stack.imgur.com/6jVEm.png)

The `H2` is being displayed every time. What's the best way to fix this?

Additionally, anyone know a better way to structure the messages in general? I am considering making `subcomponents` for every group: A `component` for Today, a `component` for Yesterday.

Thanks