【React】配列に代入されている複数の値を表示する方法

function App() {
  const fruitsArr = ["リンゴ", "バナナ", "ブドウ", "イチゴ"];

  return (
    <ul>
      {fruitsArr.map((fruits) => (
        <li key={fruits}>{fruits}</li>
      ))}
    </ul>
  );
}

// for文
function App() {
  const fruitsArr = ["リンゴ", "バナナ", "ブドウ", "イチゴ"];
  const newFruitsArr = [];

  for (let i = 0; i < fruitsArr.length; i++) {
    newFruitsArr.push(<li key={fruitsArr[i]}>{fruitsArr[i]}</li>);
  }
  return <ul>{newFruitsArr}</ul>;
}

// for...of文
function App() {
  const fruitsArr = ["リンゴ", "バナナ", "ブドウ", "イチゴ"];
  const newFruitsArr = [];

  for (let value of fruitsArr) {
    newFruitsArr.push(<li key={value}>{value}</li>);
  }
  return <ul>{newFruitsArr}</ul>;
}

export default App;