日付と金額のフォーマット

import "./styles.css";

export default function App() {
  const lists = [
    { id: 1, date: "2024-11-12", amount: 4290 },
    { id: 2, date: "2024-08-20", amount: 900 },
    { id: 3, date: "2024-01-01", amount: 8590 },
  ];

  const dateOption = {
    year: "numeric",
    month: "long",
    day: "numeric",
  };

  return (
    <div className="App">
      <h1>日付と金額のフォーマット</h1>
      {/* ハードコーディング */}
      <div className="item">
        <p>{new Date().toLocaleDateString("ja-JP", dateOption)}</p>
        <p>{Number("5555").toLocaleString()}円</p>
      </div>
      {/* 配列をmapで展開 */}
      {lists.map((item) => (
        <div key={item.id} className="item">
          <p>{new Date(item.date).toLocaleDateString("ja-JP", dateOption)}</p>
          <p>{Number(item.amount).toLocaleString()}円</p>
        </div>
      ))}
    </div>
  );
}