<div class="container"></div>

const { ReactNode } = React;


const For = <T,>({
  v,
  children,
}: {
  v: [T, (v: T) => unknown, (v: T) => T];
  children: (v: T, index: number) => ReactNode;
}) => {
  let index = 0;
  const value: ReactNode[] = [];
  for (let i = v[0]; v[1](i); i = v[2](i)) {
    value.push(children(i, index++));
  }
  return <>{value}</>;
};

const ForTest = () => {
  return (
    <For v={[5, (i) => i < 10, (i) => i + 1]}>
      {(i, index) => (
        <button key={i}>
          {index}番目は{i}
        </button>
      )}
    </For>
  );
};
ReactDOM.render(<ForTest />, document.querySelector(".container"));