For文でHTML文をリターンしたい。

Question

前提・実現したいこと

For文でoptionタグをリターンしたい。

発生している問題・エラーメッセージ

optionタグをreturnしようとしているが、関数を実行してUndefinedが返ってくる。

コンソール
　undefined　　　　　SelectNumBox.jsx:9

該当のソースコード

import React from 'react';

const SelectNumBox = (props) => {
  const options = (props) => { 
  console.log(props.lastNum)
    for (let i = props.firstNum; i > props.lastNum ; i += props.riseNum) {
    return <option value="i">{i}</option>;
  }};
  console.log(options(props));

  return(
    <>
      <select className={props.className} name="num" id={props.id}>{options(props)}</select>
    </>
  )
}

export default SelectNumBox;

試したこと

for文の条件部分のPropsの値はちゃんと渡されたのをかくにんしました。
SelectNumBoxは、関数コンポーネントです。

Comments

[takapiroid]

`props` にどのような値を渡しましたか？
options 内で loop が回っていないだけかもしれません。

[Patao150205]

<SelectNumBox className="time-selector" firstNum="0" lastNum="60" riseNum="5"></SelectNumBox>
こういう値を渡しました

[Patao150205]

<SelectNumBox className="time-selector" firstNum={0} lastNum={60} riseNum={5}></SelectNumBox>
文字列を渡してしまっていたので、数値に変えました。相変わらずpropsはしっかり渡されていますが、関数の戻り値は、Undefinedのままでした。

Answer 1

for文の条件が間違っていると思います。

i > props.lastNum;

期待としては以下のように、lastNumよりiの値が小さい時にloopではないでしょうか。
初期値： i = props.firstNum
loop毎： i を proops.riseNum分だけプラス
loop条件： i が props.lastNum 未満の時

その場合正しくは以下の通りです。

for (let i = props.firstNum; i < props.lastNum ; i += props.riseNum)

もしくは

for (let i = props.firstNum; i <= props.lastNum ; i += props.riseNum)

Comments

[Patao150205]

ありがとうございます！for文が回らなかったのが、解決されました！
あと、for文中に,returnを書いてたので１回しか回ってませんでした。
なので、空の配列を持った新しい変数を定義し、forの中で一つずつpushしていく方法に変えました。
無事にoptionタグを複数生成できました！