4. map関数で記事一覧を出力

2025/08/31 React

map関数とforEachの違い

map関数は配列を受け取り、戻り値も配列でリターンされる

配列を扱うときはforEachではなくmap関数を使う

src/Articlelist.jsx

import React from 'react';
import { useNavigate } from 'react-router-dom';

const Articlelist = () => {
  const navigate = useNavigate();
  const clickBack = () => {
    navigate(-1);
  }

  const array = ['記事1','記事2','記事3']

  return (
    <ul>  // {}内はJSの世界
      {array.map((element, i) => (  // ここのmapをforEachにするとundefinedエラーが発生する
        <li key={i}>{element}</li>
      ))}
    <ul/>
  );


  ***** 配列内にオブジェクトが入っている場合 *****
  const array = [
    {
      title: '記事1',
      date: '2025/09',
    },
    {
      title: '記事2',
      date: '20205/10',
    }
  ];

  return (
    <ul>
      {array.map((element) => (
        <li>
          <p>{element.title}</p>
          <time>{element.date}</time>
        </li>
      ))}
    </ul>
  );
}

export default Articlelist;

BACK