備忘録 React でのリストの作り方

react でのリストの作り方

list.jsx

const NavList = (data) => {
  <ul>
  { data.map((element) => {
     <li>
       <div>装飾的な何か</div>
       <Link to={data.link}>{data.name}</Link>
     </li>
  })}
  </ul>
}

こんな感じで初期は書いていた
でも、mapに無名関数を渡しているので毎回作成されるのでよろしくない

リファクタ後

const NavLink = (element) => {
  <li>
    <div>装飾的な何か</div>
    <Link to={element.link}>{element.name}</Link>
  </li>
}

const NavList = (data) => {
  <ul>
    { data.map(NavLink) }
  </ul>
}

こっちの方が見やすいし呼ばれるのは一度だけなので配列で作成する時はこうしようという備忘録