[React]配列からリストコンポーネントへ

メニューを表示するコンポーネント

import React, { useEffect } from "react";
import { List, ListItem, ListItemText } from "@material-ui/core";

// 
export const Menu = () => {	
   
   const getList = () => {
       const menuList = [
           {title: "利用規約", page: ""},
           {title: "個人情報保護方針", page: ""},
           {title: "お問い合わせ", page: ""},
           {title: "ログアウト", page: ""},
       ];
       const newList = menuList.map((item, index) => {
           return (
               <ListItem key={index}>
                   <ListItemText primary={item.title} />
               </ListItem>
           )
       })
       return (
           <List>
               {newList}
           </List>
       )
   }
	return (
		<div>
           {getList()}
		</div>		
		);
}

配列のmapを使うと配列操作が便利