For-loop in JSX

Rfor.js

import React from "react";

const RFor = ({ data, renderItem }) => {
  return data.map((item) => renderItem(item));
};

const data = ["i1", "i2", "i3", "i4", "i5", "i6", "i7", "i8", "i9", "i10"];

const Box = ({ item }) => (
  <div>
    <h6>{item}</h6>
  </div>
);

const App = () => {
  return (
    <div>
      <RFor data={data} renderItem={(item) => <Box item={item} />} />
    </div>
  );
};

export default App;