import React, { Component } from 'react';
import { Link, Route } from 'react-router-dom';

import Detail from './Detail';

const messages = [
  { id: '001', title: 'message001' },
  { id: '002', title: 'message002' },
  { id: '003', title: 'message003' },
];

export default class Message extends Component {
  render() {
    return (
      <>
        <ul>
          {messages.map(it => (
            <li key={it.id}>
              <Link to={{ pathname: '/home/message/detail', state: { id: it.id, title: it.title } }}>
                {it.title}
              </Link>
            </li>
          ))}
        </ul>
        <hr />
        <Route path="/home/message/detail" component={Detail} />
      </>
    )
  }
}